-1

我有六个用作按钮的 div。单击时，将显示不同 div（和类）中的一个跨度，而隐藏其他跨度。

纽扣：

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

我怎么知道哪个调用了函数，所以我可以知道哪个 span 可见？

4

4 回答 4

4

如果您的标记是这样的：

<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.
    });
于 2013-07-03T19:28:46.783 回答
2

既然不能有ID，我们可以获取被点击的菜单项的索引，加1，然后找到对应的informationspan来展示：

$(".menubutton").click(function() {
    var menuIndex = $(this).index() + 1;
    $(".information" + menuIndex).show();
});
于 2013-07-03T19:23:34.213 回答
0

函数中的 this 关键字指的是调用该函数的元素。

于 2013-07-03T19:22:49.217 回答
0

添加#idfor each menubutton，因此：

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

然后：

$(".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();
});
于 2013-07-03T19:25:43.250 回答