JavaScriptのthisをパラメータとして関数に渡し利用する方法｜DAD UNION

JavaScriptのthisをパラメータとして関数に渡し、パラメータを利用してクリックしたボタンの兄弟要素のテキストをalertメッセージで表示する方法をご紹介します。
thisをパラメータとして渡して利用すると、とどうなるのかちょっと気になったのでやってみました。

Contents

thisをパラメータとして利用するクリックするボタンエリアのCSS記述
JavaScriptのthisをパラメータとして関数に渡し利用するHTML記述
JavaScriptのthisをパラメータとして関数に渡し利用するJavaScriptの記述
JavaScriptのthisをパラメータとして関数に渡しクリックしたボタンの兄弟要素のテキストをalertメッセージで表示するデモページ

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>