Question

这是我在JS开发初期遇到的一个问题。问题概述如下。页面上有N个按钮。我们想为每个按钮创建一个事件监听器。假设按钮的名称为："overview-tab"，"return-tab"和"analysis-tab"。我们还有div，其类名称与按钮名称相对应。例如，<div class="overview-tab"></div>。最初，仅一个div可见。假设它是overview-tab。目标是display: none个div中的所有each，但用户单击按钮时才选择。我总是从以下内容开始，但随后意识到在第二个button中，我无权从以上each来访问$(":button").each(function(index, buttonElement) { $(element).on('click', function(err) { if(err) throw err; $(".tabs").each(function(index, tabElement) { // set all of the tabs, but the one clicked on (buttonElement) // to display: none. }); }); });的名称：

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
   <input type="button" name="overview-tab" value="Overview Tab">
   <input type="button" name="return-tab" value="Return Tab">
   <input type="button" name="analysis-tab" value="Analysis Tab">

   <div class="overview-tab" style="background:red; width: 10px; height: 10px;"></div>
   <div class="return-tab" style="display: none; background: green; width: 10px; height: 10px;"></div>
   <div class="analysis-tab" style="display: none; background: yellow; width: 10px; height: 10px;"></div>
</body>

</html>

HTML代码：

@media (min-width: 750px){
  .icons-parent-elements-class {
     width: 25%;
     display: inline-block;
     float: left;
  }
}

Answer 1

您不需要迭代所有按钮，然后绑定单击事件。您只需添加点击事件处理程序并显示相关标签并隐藏其他标签即可。您可以尝试以下代码-

注意：：我已将tab类添加到与标签相关的div中，因此与标签无关的其他div不会受到影响。我建议您是否可以在选项卡div周围放置一个包装div，这将为您提供更好的控制。

$(function(){
  $("input:button").on("click", function(){
     var name = $(this).attr("name");
     var $tabToShow = $("div.tab." + name);
     $tabToShow.show();
     $("div.tab").not($tabToShow).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name="overview-tab" value="Overview">
   <input type="button" name="return-tab" value="Return">
   <input type="button" name="analysis-tab" value="Analysis">

   <div class="overview-tab tab" style="background:red; width: 10px; height: 10px;">OverView Tab</div>
   <div class="return-tab tab" style="display: none; background: green; width: 10px; height: 10px;">Return Tab</div>
   <div class="analysis-tab tab" style="display: none; background: yellow; width: 10px; height: 10px;">Analysis Tab</div>

Answer 2

1。您可以使用按钮的name属性将其与div class进行比较

2。基于比较，显示相应的div并隐藏所有其他div

$(document).on('click', ":button",function() {
    var name = $(this).attr('name');
    if(name !==''){
        $('div').hide();
        $('div[class='+ name +']').show();
    }
});

工作片段：-

$(document).on('click', ":button",function() {
  var name = $(this).attr('name');
  if(name !==''){
    $('div').hide();
    $('div[class='+ name +']').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
   <input type="button" name="overview-tab" value="Overview">
   <input type="button" name="return-tab" value="Return">
   <input type="button" name="analysis-tab" value="Analysis">

   <div class="overview-tab" style="background:red; width: 10px; height: 10px;"></div>
   <div class="return-tab" style="display: none; background: green; width: 10px; height: 10px;"></div>
   <div class="analysis-tab" style="display: none; background: yellow; width: 10px; height: 10px;"></div>
</body>

</html>

Answer 3

简单的Java脚本代码

$('.tab').hide(); //hide all tab initailly
function changeTab(tabClicked)
{
console.log("------->"+tabClicked);

    $('.tab').hide();  //hide all the tab  
    $(tabClicked).show();  

}

为每个div创建唯一的ID，例如：-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav navbar-nav" id="menubar">

  <li>
  <input type="button" value="show foo" onclick="changeTab('#foo')">
  </li>

 <li>
  <input type="button" value="show boo" onclick="changeTab('#boo')">
  </li>


</ul>

<div id="foo" class="tab">
foo11

</div>

<div id="boo" class="tab">
boo
</div>

Answer 4

在jquery中，您不需要在元素上使用each()来设置事件，所以如果我理解得很好，您可能想要什么：

$('[type="button"]').on('click',function(){
  $('.overview-tab, .return-tab, .analysis-tab').hide()
  $('.' + $(this).attr('name')).show();
});

如果只想在开始显示一个div，则只需在上面的代码之前添加：

$('.return-tab, .analysis-tab').hide()

Answer 5

除了@Bhushan Kawadkar，您可以在jquery中使用siblings()

类似这样的东西：

$(function(){
   $("input:button").on("click", function(){
   var name = $(this).attr("name");
   var $tabToShow = $("div.tab." + name);
   $tabToShow.show().siblings("div.tab").hide();
   });
});

siblings("div.tab")将选择活动标签中具有div且具有.tab类的任何同级标签。这样，我们确保<input type="button">也不会隐藏（因为<input type="button">是活动标签页的同级标签。）

隐藏div（取决于按下的按钮）

5 个答案: