0

toggleClass()では、クリックされた特定のアイテムのクラスを追加したい場合、どうすればよいでしょうか?

私はそれが基本的な構文のようなものであることを知っていますが、私はかなり新しいjQueryので、助けていただければ幸いです. より具体的には、次のようなものがあります。

<div class=zoom></div>

<div>
    <div class=grid info a1></div>
    <div class=grid info a2></div>
    <div class=grid info a3></div>
</div>

$(".grid.info").click(function() {
    $('.zoom').toggleClass("A1 or A2 or A3 depending on which was clicked");
});

再度、感謝します！

4

5 に答える 5

1

常に次の順序になる場合は、位置を指定できますa1, a2, a3, etc..。

$(".grid.info").click(function() {    
    $(".grid.info").not(this).each(function(){
        var classToRemove = "a" + ($(this).index() + 1);
        $('.zoom').removeClass(classToRemove);
    });

    var classClicked = "a" + ($(this).index() + 1);
    $('.zoom').toggleClass(classClicked);
});

デモ-クリックしたdivのaxクラスを切り替え、以前にクリックした他のすべてのaxを削除します

上記は、順序が常に一致する場合にのみ機能しますが、divの順序が異なり、index()が役に立たなくなり、次のようにデータ属性を追加することを検討する必要があります。

<div class="grid info a3" data-class="a3">3</div>
<div class="grid info a2" data-class="a2">2</div>
<div class="grid info a1" data-class="a1">1</div>

すでに提案されているようにデータ属性を使用すると、より信頼性が高くなり、スクリプトを作成するだけで、次のようにわずかに変更されます。

$(".grid.info").click(function() {    
    $(".grid.info").not(this).each(function(){
        var classToRemove = $(this).data("class");
        $('.zoom').removeClass(classToRemove);
    });

    var classClicked = $(this).data("class");
    $('.zoom').toggleClass(classClicked);
});

デモ-代わりにデータ属性を使用

于 2013-02-10T20:27:24.193 に答える
0

これを試して： 

$(".grid.info").click(function() {
        $(this).toggleClass('.zoom');
    });

.toggleClass( className )..ここで確認できます。したがって、トグルしたいClassNameをtoggleClassのパラメーターとして使用できます

于 2013-02-10T20:25:33.543 に答える
0

あなたはすでに回答を受け入れていますが、私はあなたの問題に対する解決策の可能性に興味をそそられたので、これを思いつきました:

$('.grid').click(function(){
    var theClass = /(a\d)/.exec(this.className).shift(),
        curClass = /(a\d)/.exec($('.zoom').get(0).className),
        exClass = curClass !== null ? curClass.shift() : '';
    console.log(theClass === exClass);
    if (exClass == theClass) {
        $('.zoom').removeClass(theClass);
    }
    else {
        $('.zoom')
        .removeClass(exClass)
        .addClass(theClass);
    }
});

JS フィドルのデモ。

参考文献:

于 2013-02-10T20:51:22.017 に答える
0

HTML:

<div class="zoom"></div>

<div>
    <div class="grid info a1" data-class="a1"></div>
    <div class="grid info a2" data-class="a2"></div>
    <div class="grid info a3" data-class="a3"></div>
</div>

JS:

$(".grid.info").click(function() {
    $('.zoom').toggleClass($(this).data("class"));
});
于 2013-02-10T20:49:44.280 に答える
0

jsFiddle でこれを行う方法の例。

HTML:

<div class="zoom">
    Zoom
</div>

<div>
    <div class="grid info a1">1</div>
    <div class="grid info a2">2</div>
    <div class="grid info a3">3</div>
</div>

CSS:

.zoom {
    display: none;
}

.show {
    display: block;
}

JavaScript:

$(".grid.info").click(function() {
    $('.zoom').toggle("show");
});
于 2013-02-10T20:26:10.930 に答える