如何正确编写可以单独工作的jQuery切换按钮? [英] How to correctly write jQuery toggle button that can work individualy?

问题描述

我正在尝试创建一个简单的脚本，该脚本可以切换可放置在页面上任何地方的按钮，并且无论结构如何，都可以单独使用.

I'm trying to create simple script which toggles buttons that can be placed anywhere on the page and work individualy no matter how the structure is.

$(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>

推荐答案

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

There's several issues in your code. Firstly a click handler function cannot have an else block. Secondly you try to hide/show all .togItem elements instead of the one related to the clicked button.

要更合理地处理此问题，请将按钮和要显示的内容组合在一起.然后，当单击按钮时，可以使用DOM遍历来找到相关的项目.在下面的示例中，我将这两个子都设为div的子级，并使用next()对其进行关联.试试这个:

To approach this more logically, group the button and the content to be shown together. Then you can use DOM traversal to find the related item when the button is clicked. In the example below I made both of them children of a div and used next() to relate them. Try this:

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属性来关联它们，如下所示:

If the HTML is spread out and the related elements are not siblings then you can instead use data attributes to relate them, like this:

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>

这篇关于如何正确编写可以单独工作的jQuery切换按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！