1

在 JSFiddle 上查看：http: //jsfiddle.net/Mm79v/

我的 jQuery

$(".SupOrSubButton").click(function(e) {
    var child = $(this).children().attr('id');
    if (child == 'Superscript') {
        if ($(this).hasClass('ButtonActive')) {
            $(this).removeClass('ButtonActive');
        } else {
            $('#Subscript').parent().removeClass('ButtonActive');
            $(this).toggleClass('ButtonActive');
        }
    } else if (child == 'Subscript') {
        if ($(this).hasClass('ButtonActive')) {
            $(this).removeClass('ButtonActive');
        } else {
            $('#Superscript').parent().removeClass('ButtonActive');
            $(this).toggleClass('ButtonActive');
        }
    };
});

我很想知道是否有更好的方法来使用 JQuery 完成我上面所做的事情，因为我需要在未来的某个日期在其他地方实现类似的东西。我仍在学习 JQuery，我知道这很有效，但这是最好的方法，甚至是好方法吗？

此致

蒂姆

4

2 回答 2

0

您的代码工作正常，但如果您想让它更短，您可以试试这个：

$(".SupOrSubButton").click(function(e) {
    var child = $(this).children().attr('id');
    $(this).toggleClass('ButtonActive');
    $(".SupOrSubButton:not(:has(#" + child +"))").removeClass('ButtonActive');
});

基本上作为您的代码，ButtonActive如果它不存在，它会添加类，如果存在则将其删除。ButtonActive并且还从未点击的.SupOrSubButtondiv中删除...

编辑：

稍微详细说明一下：

$(".SupOrSubButton:not(:has(#" + child +"))").removeClass('ButtonActive');`

这段代码有 3 个部分，第一个选择与.SupOrSubButton类匹配的元素，第二个 ( :not()) 否定第三个 ( )，它在原始选择器:has()中查找与您的 id 匹配的元素。child

基本上，选择器作为一个整体意味着“查找具有特定类的元素，这些元素没有特定的 id 作为子元素”

演示：http: //jsfiddle.net/darkajax/3bVJ6/

于 2013-04-09T22:25:20.327 回答
0

这是否完成了你想要做的事情？

JSFiddle 链接

$(".group-1 .SupOrSubButton div").click(function (e) {
$(".group-1 div").removeClass('ButtonActive');
$(this).parent().addClass('ButtonActive');

});

于 2013-04-09T22:30:14.757 回答