jquery - この JQuery コードでボタンをクリックすると、すべてのイベントが発生します

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

You may use "button:nth-child()" Selector to refer them.

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