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 的顺序不同，那么 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

如何在 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 回答
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

虽然您已经接受了答案，但我对解决您的问题的潜力很感兴趣，所以，我想出了这个：

$('.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 回答