Question

好的，所以我对这方面的知识非常有限，我无法在任何地方找到答案。我想要做的是创建多个按钮切换信息。因此，当单击第一个切换时，div 1被切换，当我单击第二个切换div时，两个打开，最好是div 1关闭。我的代码很基础我对此很新。现在无论我输入到切换区域的值是什么，两个div都关闭。谢谢，我希望这是有道理的。

这是我的代码：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div.house").toggle();

  });
});
</script>

<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>

<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>

Answer 1

您可以选择下一个兄弟：

$("button").click(function(){
   $(this).next().toggle();
});

在上面的代码中，JavaScript this关键字是指被点击的元素。 $(this)创建一个jQuery集合，.next()方法选择集合元素的下一个兄弟。

Answer 2

我也同意，首先你需要隐藏所有div：

$("button").click(function () {
    $('div').hide();
    $(this).next().toggle();
});

Answer 3

<script>
    $(document).ready(function () {
        $(document).on("click", ".js-toggle__button", function (e) {
            $(".js-toggle__text").hide();
            $(this).next(".js-toggle__text").show();
        });
    });
</script>

<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
    <p>SAMPLE TEXT 1 ETC...</p>
</div>

<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
    <p>SAMPLE TEXT 2 ETC...</p>
</div>

最好在从JS访问元素时使用唯一定义的标识符（并且不要将它们用于CSS - 使用单独的名称）。

有一天你的HTML代码可以大大改变，JS无论如何都会工作，因为它取决于标识符，但不取决于结构或标签名称。

如何使用jquery切换特定的div

3 个答案: