javascript - 循环隐藏除一个之外的所有 div

Question

当选择一个按钮时，我试图隐藏多个 DIV，只留下选定的一个打开。目前我正在使用几个 onclick 函数来执行此操作。还有比这更简单、更快、更干净的方法吗？

所以目前我有 4 个 div 显示和关闭，如下所示:

function selectcheck() {
    $('#show2').hide();
    $('#show3').hide();
    $('#show4').hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show1"> Content here with a <button type='button' id='button1' name='button1' onclick='selectcheck()' class='btn btn-select'>SELECT THIS</button></div>

<div id="show2"> Content here with a <button type='button' id='button2' name='button2' onclick='selectcheck2()' class='btn btn-select'>SELECT THIS</button></div>

<div id="show3"> Content here with a <button type='button' id='button3' name='button3' onclick='selectcheck3()' class='btn btn-select'>SELECT THIS</button></div>

<div id="show4"> Content here with a <button type='button' id='button4' name='button4' onclick='selectcheck4()' class='btn btn-select'>SELECT THIS</button></div>

其他的也一样。它们都以 show(number) 开头。有没有一种方法可以循环遍历除选定的之外的所有隐藏内容？

Answer 1

一些注意事项:

• 远离内联函数(即selectcheck())。您应该使用 jQuery 的绑定(bind)函数 $('button').on() 为每个函数附加一个单击函数。
• 从那里，我们可以获得所有的div。如果该组之外有多个 div，您可以为它们分配一个类名。即 $('div.content_hideable') 或 $('#content > div')。
• 当按钮被点击时，它会以 this 的形式将按钮传递给函数。您可以使用 jQuery 的 not()函数来过滤所有要隐藏的 div，除了包含此按钮的 div:

$(document).ready(function() {
  $('button').on('click', function() {
    $('div').not($(this).parent()).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show1">1 Content here with a <button type='button' id='button1' name='button1' class='btn btn-select'>SELECT THIS</button></div>

<div id="show2">2 Content here with a <button type='button' id='button2' name='button2' class='btn btn-select'>SELECT THIS</button></div>

<div id="show3">3 Content here with a <button type='button' id='button3' name='button3' class='btn btn-select'>SELECT THIS</button></div>

<div id="show4">4 Content here with a <button type='button' id='button4' name='button4' class='btn btn-select'>SELECT THIS</button></div>

为了澄清您的以下问题，请尝试执行以下操作以防止与其他元素发生冲突:

$(document).ready(function() {
  $('div.show button').on('click', function() {
    $('div.show').not($(this).parent()).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show">1 Content here with a <button type='button' id='button1' name='button1' class='btn btn-select'>SELECT THIS</button></div>

<div class="show">2 Content here with a <button type='button' id='button2' name='button2' class='btn btn-select'>SELECT THIS</button></div>

<div class="show">3 Content here with a <button type='button' id='button3' name='button3' class='btn btn-select'>SELECT THIS</button></div>

<div class="show">4 Content here with a <button type='button' id='button4' name='button4' class='btn btn-select'>SELECT THIS</button></div>