0

現在選択されているli(list)のクラスを変更したい

 $('li.doBlokkeer').click(function(e) {
 $(this).addClass('doDEBlokkeer').removeClass('doBlokkeer');
 });

 $('li.doDEBlokkeer').click(function(e) {
 $(this).addClass('doBlokkeer').removeClass('doDEBlokkeer');
 });

そのため、現在の li が選択されている場合は、そのクラスを変更する必要があります (doDEBlokkeer が必要です)。上記のコードは機能します..問題は、これが各 LI アイテムに対して一度しか機能しないことです..

li.doBlokkeerをクリックするとクラスが変更されますが、同じ現在のliをもう一度押すと、li.doDEBlokkeer関数の代わりに同じ関数li.doBlokkeerが呼び出されます(cssクラスにもかかわらず)。私は非常に多くのことを試しましたが、本当に解決策が見つかりません。皆さん、私を助けてくれますか? 解決策を14時間以上探していたので、今はイライラしています...

4

4 に答える 4

3

問題は、動的に変更されるクラス セレクター (その時点で DOM に存在していた要素) でイベントをバインドしているため、バインディングが失われることです。イベント委任構文の使用を検討するか、変更されない別のクラス/セレクターにバインドすることができます。

Event delegation (jq >=1.7) を使用すると、次のことを試すことができます。

$('ul').on('click', 'li.doBlokkeer', function(e) {
     $(this).addClass('doDEBlokkeer').removeClass('doBlokkeer');
 });

 $('ul').on('click', 'li.doDEBlokkeer', function(e) {
    $(this).addClass('doBlokkeer').removeClass('doDEBlokkeer');
 });

別のショートカット:

$('.cls').click(function (e) { // add a common class to all lis and bind the click event to that.
    var flg = $(this).is('.doBlokkeer'); //check if it is a specific class
    $(this).addClass(function () {
        return flg ? 'doDEBlokkeer' : 'doBlokkeer'; //based on flag return the other class
    }).removeClass(function () {
        return flg ? 'doBlokkeer' : 'doDEBlokkeer'; //based on flag return the other class
    });
});

あるいは単に：

$('.cls').click(function (e) {
    $(this).toggleClass('doDEBlokkeer').toggleClass('doBlokkeer');
});

フィドル

フィドル

于 2013-09-19T19:08:33.260 に答える
0

また、これを考慮してください：

$('li').click(function()
{
    var $this = $(this),
        one = 'doBlokkeer',
        two = 'doDEBlokkeer';

    if ( $this.hasClass(one) ) {
        $this.removeClass(one).addClass(two);
    } else {
        $this.removeClass(two).addClass(one);
    }
});
于 2013-09-19T19:18:16.813 に答える
0

.toggleClassを使用する

$('li.doBlokkeer').click(function(e) {
    $(this).toggleClass('doDEBlokkeer');
});

2 回目のクリック イベントは不要です。

于 2013-09-19T19:18:38.827 に答える
0

問題は前に説明したように、指定されたクラス名を持つ要素にイベントをバインドし、クリックするとクラス名が変更されるため、ハンドラーはそれ以上リッスンしません...

liイベント委譲は軽量であり、要素をs にネストすることもできるため (link や div など)、イベント委譲を使用することをお勧めします。まず、クラスを に追加し'cls'ます。HTML は次のようになります。<ul><ul class="cls">

<ul class="cls">
    <li class="doBlokkeer"><div>Click on me</div></li>
    <li class="doDEBlokkeer">Click on me</li>
    <li class="doBlokkeer">Click on me</li>
    <li class="doBlokkeer">Click on me</li>
</ul>

JavaScript に必要なものは次のとおりです。

$('.cls').on('click', '.doDEBlokkeer, .doBlokkeer', function (e) {
    $(this).toggleClass('doDEBlokkeer doBlokkeer');
});

...これにはjQuery 1.7が必要です。jQuery 1.4.2 以降しかない場合は、'.delegate()` を使用できます

$('.cls').delegate('.doDEBlokkeer, .doBlokkeer', 'click', function (e) {
    $(this).toggleClass('doDEBlokkeer doBlokkeer');
});

イベント (そして 1 つだけ) が にulあり、.on()渡されたクラス名によって定義された適切な要素が選択されます。

PSL からフィドルを更新しました

于 2013-09-20T16:39:58.193 に答える