Question

我的菜单是这样的：

我的代码更改了所选的菜单按钮，如下所示：

$('#bluebutton').click(function () {
    $('.testul li').removeClass('selectedred selectedpurple selectedgreen selectedorange');
    $('#bluebutton').addClass('selectedblue');
});

$('#redbutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedpurple selectedgreen selectedorange');
    $('#redbutton').addClass('selectedred');
});

$('#purplebutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedred selectedgreen selectedorange');
    $('#purplebutton').addClass('selectedpurple');
});

$('#greenbutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedred selectedpurple selectedorange');
    $('#greenbutton').addClass('selectedgreen');
});

$('#orangebutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedred selectedpurple selectedgreen ');
    $('#orangebutton').addClass('selectedorange');
});

当然这是错误的代码，因为它可以写得更短。我应该只使用数字来解决这个问题，这样我可以做一些预测，或者有更好的方法来做这个吗？

Answer 1

这可以通过使用[id*="button"]在所有按钮上添加通用点击事件来缩小。然后从嵌套锚点中获取相关颜色。

$('[id*="button"]').click(function(){
    $('.testul li').removeClass();
    $(this).addClass('selected'+$('a',this).attr('class'));
});

或

$('li').click.../*this would be the same as above*/

fiddle

Answer 2

在这种特殊情况下，似乎没有充分的理由来添加和删除类。只需更改背景颜色，而不是添加和删除类来执行此操作。

$(this).css("background-color", "red");

Answer 3

您可以将代码缩减为仅1次点击绑定。单击某个元素时，将删除所有li中的类，然后在当前单击的li上添加所选类。

$(".testul > li").click(function(){
$('.testul li').removeClass('selectedred selectedpurple selectedgreen selectedorange selectedblue');
    var color = $(this).attr("id").replace("button","");
    $('#'+color+'button').addClass('selected'+color);

});

这是更新的小提琴 - https://jsfiddle.net/23r4q610/2/

Answer 4

我会避免将颜色名称硬编码到HTML ID中。而是使用像“选定”这样的CSS类名称，并在CSS中描述应该是什么样的。例如：

<li id="home-button" class="color-button"><a href="#">Home</a>

CSS：

#home-button.selected,
#home-button:hover {
    background: -webkit-linear-gradient(#78b1ff, #4881dc);
}

JS：

$('.color-button').click(function () {
    $(this).toggleClass("selected").siblings(".color-button").removeClass("selected");
}

这种方式将颜色信息（表示）与语义信息（如“home”）分开，JS代码在很大程度上更短。

注意：这只是一个建议，我没有测试过，但应该给你一个好的开始。

Javascript onclick菜单更改背景颜色

4 个答案: