JavaScriptのthisをパラメータとして関数に渡し、パラメータを利用してクリックしたボタンの兄弟要素のテキストをalertメッセージで表示する方法をご紹介します。
thisをパラメータとして渡して利用すると、とどうなるのかちょっと気になったのでやってみました。
Contents
ディスプレイ広告
thisをパラメータとして利用するクリックするボタンエリアのCSS記述
※クリックするボタンエリア(.clkarea)のCSS記述です。必要に応じて変更して下さい。
<style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 2em; padding: 30px 0; } .clkarea{ cursor: pointer; font-size: 20px; font-weight: bold; border: solid 1px #000; color: #ffffff; width: 300px; height: 60px; border-radius: 15px; margin: 0 auto 60px auto; text-align: center; background-color: #000000; line-height: 60px; } </style>
JavaScriptのthisをパラメータとして関数に渡し利用するHTML記述
※クリックするボタンエリア(class=”clkarea”)とボタンエリアの兄弟要素エリア(class=”nextarea”)を用意します。
<h1>JavaScriptのthisをパラメータとして関数に渡し、<br>クリックしたボタンの兄弟要素のテキストをalertメッセージで表示</h1> <div class="clkarea"> ココをクリック </div> <div class="nextarea"> 上記ボタンをクリックするとこのエリアのテキストをalertメッセージで表示します。 </div>
JavaScriptのthisをパラメータとして関数に渡し利用するJavaScriptの記述
※jquery-2.1.4.min.jsファイルを読み込みます。ボタンエリア(.clkarea)をクリックするとclikget()関数にthis(クリックボタンエリア情報)をパラメータとして渡します。clikget()関数内ではパラメータとして渡されたthis(evet)を利用し「クリックエリアのテキストをconsole.logで出力」と「クリックしたボタンの兄弟要素のテキストをalertメッセージで表示」してます。
<script src="jquery-2.1.4.min.js"></script> <script> $('.clkarea').click(function() { clikget(this); }); function clikget(event) { // console.log(event); console.log(event.textContent); //クリックエリアのテキストをconsole.logで出力 alert($("."+event.className).next().text()); //クリックしたボタンの兄弟要素のテキストをalertメッセージで表示 } </script>
JavaScriptのthisをパラメータとして関数に渡しクリックしたボタンの兄弟要素のテキストをalertメッセージで表示するデモページ
JavaScriptのthisをパラメータとして関数に渡しクリックしたボタンの兄弟要素のテキストをalertメッセージで表示するデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。