How to know which div called a function in a class?

Question

I've got six divs that act as buttons. When clicked, one of the spans in a different div (and class) is displayed, and others are hidden.

Buttons:

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

Info shown based on clicked button:

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

How do I know which one called the function, so I can know which span to make visible?

Answer 1

Provided your markup is this way:

<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>

You can do this:

$('.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.
});

Demo

with this you can safely remove the class with index like information1, information2 etc instead you can add a common class say 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>

and change it to:

$('.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

Since you can't have ID's, we can get the index of the clicked menu item, add 1, then find the corresponding information span to show:

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

Answer 3

函数内部的this关键字引用调用该函数的元素。

Answer 4

Add the #id for each menubutton , so:

<div class="menubutton" id="btn_1"></div>

then:

$(".menubutton").on("click", function() {
  // Get the id of button clicked.
  var id = $(this).attr("id").split("_")[1];

  // Target SPAN with the same id.
  $("SPAN.information" + id).show();
});