javascript - どの div がクラス内の関数を呼び出したかを知る方法は?

Question

ボタンとして機能する 6 つの div があります。クリックすると、別の div (およびクラス) のスパンの 1 つが表示され、他のスパンは非表示になります。

ボタン:

<div class="menu">
    <div class="menubutton">
        Menu1
    </div>
      .
      .
      .
    <div class="menubutton">
        Menu6
    </div>
</div>

クリックされたボタンに基づいて表示される情報:

<div class="information">
    <span class="information1"> Info1 </span>
    ...
    <span class="information6"> Info6 </span>
</div>

どのスパンが表示されるかを知るために、どの関数が呼び出されたかを知るにはどうすればよいですか?

Answer 1

マークアップが次のようになっている場合:

<div class="menu">
    <div class="menubutton">
        Menu1
    </div>
     <div class="menubutton">
        Menu2
    </div>
     <div class="menubutton">
        Menu3
    </div>
     <div class="menubutton">
        Menu4
    </div>
     <div class="menubutton">
        Menu5
    </div>
    <div class="menubutton">
        Menu6
    </div>
</div>
<div class="information">
    <span class="information1"> information1 </span>
    <span class="information2"> information2 </span>
    <span class="information3"> information3 </span>
    <span class="information4"> information4 </span>
    <span class="information5"> information5 </span>
    <span class="information6"> information6 </span>
</div>

あなたはこれを行うことができます：

$('.menubutton').click(function(){
     var index = $('.menubutton').index(this); //get the index of the menubutton clicked
    $('.information > span').eq(index).show().siblings().hide(); // show the corresponding information item based onthe clicked one's index and hide others.
});

デモ

これにより、安全にクラスなどのインデックスを削除することができinformation1, information2ます代わりに、共通のクラスを追加することができますcontent

 <div class="information">
        <span class="content"> information1 </span>
        <span class="content"> information2 </span>
        <span class="content"> information3 </span>
        <span class="content"> information4 </span>
        <span class="content"> information5 </span>
        <span class="content"> information6 </span>
    </div>

次のように変更します。

$('.menubutton').click(function(){
         var index = $('.menubutton').index(this); //get the index of the menubutton clicked
        $('.information > .content').eq(index).show().siblings().hide(); // show the corresponding information item based onthe clicked one's index and hide others.
    });

Answer 2

ID を持つことはできないため、クリックされたメニュー項目のインデックスを取得し、1 を追加してから、information表示する対応するスパンを見つけることができます。

$(".menubutton").click(function() {
    var menuIndex = $(this).index() + 1;
    $(".information" + menuIndex).show();
});

Answer 3

関数内の this キーワードは、関数を呼び出した要素を参照します。