Question

我有30个左右的按钮，后跟一个保存内容的div。问题是当我点击任何一个按钮时它们都会触发。我希望该函数仅在单击的按钮及其对应的div上运行。我假设我需要this和next，但我不确定该怎么做。

 $(function(){
    $('.button').click(toggleBox);
 });

 function toggleBox(){

   var box = $('.content');

   if (box.data('on') == true){
       boxOff();
       } else { // box's on property is false (it's off), so we need to turn it on
       boxOn();
       }
  }

  function boxOn(){ //function removes open button and shows content
      $('.button').removeClass('open-button').addClass('closed-button');
      $('.content').removeClass('closed-content').addClass('open-content').data("on",true);
       }

  function boxOff(){ //function removes close button and hides content
      $('.button').removeClass('closed-button').addClass('open-button');
      $('.content').removeClass('open-content').addClass('closed-content').data("on",false);
                    }

Answer 1

这不能按预期工作的原因是您使用类。函数var box = $('.content');中的以下行抓取了该类的所有元素，并且根据您的问题，我想您只需要一个特定的元素。如果您提供更多HTML，我现在可以向您显示确切的答案：

如果你的HTML看起来像这样：

<button class="open-button">Click Me</button>
<div class="close-content" data-on="false">Content in here</div>

然后你的脚本将是这样的：

$('.button').on("click", function(e) {
    if ($(this).next(".content").data("on")) {
        $(this).removeClass("open-button").addClass("close-button")
            .next(".content").removeClass("close-content").addClass("open-content").data("on",true);
    }
    else {
        $(this).removeClass("close-button").addClass("open-button")
            .next(".content").removeClass("open-content").addClass("close-content").data("on",false);
    };
});

Answer 2

这是猜测，因为我对你的设置并不积极，但这听起来像是我最近必须做的事情。另外，从它的声音来看，我们可能处于相同的jQuery级别，所以对我来说很容易。

这对你有用吗？

function boxOn(){ //function removes open button and shows content
  $(this).removeClass('open-button').addClass('closed-button').next('.content').removeClass('closed-content').addClass('open-content').data("on",true);
   }

function boxOff(){ //function removes close button and hides content
  $(this).removeClass('closed-button').addClass('open-button').next('.content').removeClass('open-content').addClass('closed-content').data("on",false);
                    }

Answer 3

您可以使用“button:nth-child()”选择器来引用它们。

http://api.jquery.com/nth-child-selector/

当我使用此JQuery代码单击按钮时，每个事件都会触发

3 个答案: