javascript - 如何正确编写可以单独工作的 jQuery 切换按钮？

Question

我正在尝试创建简单的脚本来切换按钮，这些按钮可以放置在页面上的任何位置并且无论结构如何都可以单独工作。

$(document).ready(function() {
      $('.togBtn').each(function(i) {
        $(this).click(function() {
          $('.togItem').hide();
        } else {
          $('.togItem').show();
        });
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="togBtn" id="togBtn-1">
    <button>But 1</button>
    <div class="togItem" id="togItem-1">Item 1</div>
  </div>
  <button class="togBtn" id="togBtn-2">But 2</button>
  <button class="togBtn" id="togBtn-3">But 3</button>
  <div class="togItem" id="togBtn-2">Item 2</div>
  <div class="togItem" id="togBtn-3">Item 3</div>
</section>

标签： javascriptjqueryhtml

Answer 1

您的代码中有几个问题。首先，click处理函数不能有else块。其次，您尝试隐藏/显示所有 .togItem元素，而不是与单击的按钮相关的元素。

为了更合乎逻辑地处理这个问题，请将按钮和要显示的内容组合在一起。然后就可以在按钮被点击的时候使用DOM遍历来找到相关的item。在下面的示例中，我将它们都设为 a 的子级div并用于next()关联它们。试试这个：

jQuery(function($) {
  $('.togBtn').click(function() {
    $(this).next('.togItem').toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="togBtnContainer">
    <button class="togBtn">But 1</button>
    <div class="togItem">Item 1</div>
  </div>
  <div class="togBtnContainer">
    <button class="togBtn">But 2</button>
    <div class="togItem">Item 2</div>
  </div>
  <div class="togBtnContainer">
    <button class="togBtn">But 3</button>
    <div class="togItem">Item 3</div>
  </div>
</section>

如果 HTML 展开并且相关元素不是同级元素，那么您可以改为使用data属性来关联它们，如下所示：

jQuery(function($) {
  $('.togBtn').click(function() {
    var targetSelector = $(this).data('target');
    $(targetSelector).toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="togBtn" id="togBtn-1" data-target="#togItem-1">
    <button>But 1</button>
    <div class="togItem" id="togItem-1">Item 1</div>
  </div>
  <button class="togBtn" id="togBtn-2" data-target="#togItem-2">But 2</button>
  <button class="togBtn" id="togBtn-3" data-target="#togItem-3">But 3</button>
  <div class="togItem" id="togItem-2">Item 2</div>
  <div class="togItem" id="togItem-3">Item 3</div>
</section>