1

ボタン ( ) がクリックされたときに.box-openボックス ( ) にクラス (display:block を追加する)を追加するこのコードを作成しましたが、問題は、これを 1 つの .share div にのみ適用するのに問題があることです。ボタンをクリックするたびに、すべてのs にクラスが適用されるためです。.sharebox#share-but.sharebox.box-open

function shareBox() {
$('.share').each(function( index ) {
    $(this).on('click', '#share-but', function() {
        if ($('.sharebox').hasClass('box-open')) {
            $('.sharebox').removeClass('box-open');
        }        
        else {
            $('.sharebox').addClass('box-open');
        }
    });
});
}
shareBox();

これが問題の画像です（Tumblrテーマを作成しています）。うまくいけば、はるかに理解しやすくなります。http://24.media.tumblr.com/c5c4252607bf4a9905c7c9de5b592c60/tumblr_ml4t2fSuQo1rqce8co1_500.png <---- これはボタンの 1 つをクリックしたときに発生しましたが、ボタンの内側をクリックしたときに.shareboxクラスを追加したいのは 1 つだけです。同じ部門。.box-open#share-but.share

これがすべて理にかなっていることを願っています。私は2週間前に学習を始めたばかりなので、Javascript / Jqueryにはまだ慣れていないので、どんな助けも大歓迎です!

4

2 に答える 2

1

イベントのソースに対処する$(this)代わりに使用する必要があります$('.sharebox')

$('.sharebox').addClass('box-open');

だろう

$(this).addClass('box-open');

要素の id はドキュメント内で一意であるはずなので、クリックを直接 '#share-but' にバインドできます。一意でない場合は、このようにバインドできます。

$('.share').on('click', '#share-but', function() {
    if ($('.sharebox').hasClass('box-open')) {
        $('.sharebox').removeClass('box-open');
    }        
    else {
        $('.sharebox').addClass('box-open');
    }
});

シンプルにするために使用できますtoggleClass。ID #share を持つ単一のアイテムがあると仮定しますが、

$('#share-but').click(function(){
   $(this).toggleClass("box-open");
});
于 2013-04-12T07:45:31.800 に答える
0

これはより単純なバージョンになります。クラス名を切り替えることができます:)

   $('.share').on("click", "#share-but", function() {
      $(this).find(".sharebox").toggleClass('box-open');
  });
于 2013-04-12T07:49:09.337 に答える