0

我有 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);
                    }
4

3 回答 3

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);
    };
});
于 2012-10-27T03:21:57.120 回答
1

这是一个猜测，因为我对你的设置并不肯定，但这听起来像是我最近必须做的事情。另外，从它的声音来看，我们可能在相同的 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);
                    }
于 2012-10-27T03:35:53.583 回答
0

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

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

于 2012-10-27T03:24:23.630 回答