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的绑定函数$('button').on()将click函数附加到每个函数。
从那里，我们可以获取所有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>

循环隐藏除一个以外的所有div

1 个答案: