2

我有一个包含大约 10 个项目的导航菜单，我将这段代码放在一起来更新哪些链接被选中，哪些没有被选中。它手动更新类。正如您可能知道的那样，问题在于它效率低下并且更新起来很痛苦。有更好的方法吗？

$('#Button1').click(function(){
        $('#Button1').addClass("selectedItem");
        $('#Button2').removeClass("selectedItem");
        $('#Button3').removeClass("selectedItem");
        $('#Button4').removeClass("selectedItem");
        $('#Button5').removeClass("selectedItem");
        $('#Button6').removeClass("selectedItem");
        $('#Button7').removeClass("selectedItem");
        $('#Button8').removeClass("selectedItem");
        $('#Button9').removeClass("selectedItem");
        $('#Button10').removeClass("selectedItem");
    });
4

3 回答 3

2

你可以试试这样的 -

$("[id^='Button']").removeClass("selectedItem");
$('#Button1').addClass("selectedItem");

这将首先selectedItem从任何具有以“button”开头的 id 属性的元素中删除所有类。然后第二个命令将类添加到Button1

您也可以像这样简单地将所有元素与相同的处理程序绑定 -

var $buttons = $("[id^='Button']");

$buttons.on('click', function ()
{
  $buttons.removeClass("selectedItem");
  $(this).addClass("selectedItem");
});

对于每个元素，当单击时，类将被删除 - 单击的元素然后添加类。

检查Attribute Starts With Selector [name^="value"]选择器。

于 2013-04-04T19:21:32.423 回答
2

我建议使用类，因为这正是它们的用途——表示元素组。虽然您可以使用 Lix 提出的方法轻松选择按钮（如果您无法修改 HTML，则应该使用此方法），但使用 class 更不显眼：

var $buttons = $('.button').on('click', function() {
    $buttons.removeClass('selectedItem');
    $(this).addClass('selectedItem');
});

元示例：http: //jsfiddle.net/88JR2/

于 2013-04-04T19:32:38.010 回答
0

您可以有一个类 .button 然后将其应用于所有按钮

$('#Button1').click(function(){
    $('.button').removeClass("selectedItem");
    $('#Button1').addClass("selectedItem");

});
于 2013-04-04T19:21:03.760 回答