Question

我有一个包含大约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");
    });

Answer 1

你可以尝试这样的事情 -

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

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

您也可以使用相同的处理程序绑定所有元素，如下所示 -

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

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

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

结帐Attribute Starts With Selector [name^="value"]选择器。

Answer 2

我建议使用类，因为这正是它们的用途 - 表示元素组。虽然您可以使用Lix提出的方法轻松选择按钮（如果您不能修改HTML，则应使用此方法），使用类更不引人注目：

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

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

Answer 3

你可以有一个班级.button然后将它应用到你的所有按钮

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

});

为导航菜单创建“选定项目”javascript代码？

3 个答案: