Javascript onclick菜单更改背景颜色

我的菜单是这样的：

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

$('#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');
});

---

当然，这是糟糕的代码，因为它可以写得更短。我应该只使用数字来完成这项工作，这样我就可以进行一些foreach，还是有更好的方法来完成这项工作？

在这种特殊情况下，似乎没有很好的理由添加和删除类。只需更改背景颜色，而不是添加和删除类即可

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

---

在这种特殊情况下，似乎没有添加和删除类的好理由。只需更改背景颜色，而不是添加和删除类即可

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

---

这可以通过使用

[id*=“button”]

在所有按钮上添加一个通用单击事件来压缩。然后从嵌套锚中获取相关颜色

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

或

---

这可以通过使用

[id*=“button”]

在所有按钮上添加一个通用单击事件来压缩。然后从嵌套锚中获取相关颜色

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

或

---

您可以将代码缩减为仅单击一次绑定。其中，单击元素时，将删除所有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);

});

---

这里是更新的fiddle-

您可以将代码减少到仅单击一次绑定。其中，单击元素时，将删除所有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);

});

---

以下是更新的fiddle-

我将避免将颜色名称硬编码到HTML ID中。而是使用一个CSS类名，比如“selected”，并在CSS中描述它应该是什么样子。例如：

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

JS:

通过这种方式，颜色信息（表示）与语义信息（如“home”）分离，JS代码大大缩短

---

注意：这只是一个建议，我没有测试过它，但应该给您一个很好的起点。

我会避免将颜色名称硬编码到HTML ID中。而是使用一个CSS类名，比如“selected”，并在CSS中描述它应该是什么样子。例如：

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

JS:

通过这种方式，颜色信息（表示）与语义信息（如“home”）分离，JS代码大大缩短

---

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

太棒了，谢谢你的解释和提琴，学习这样的新东西很好。太棒了，谢谢你的解释和提琴，学习这样的新东西很好。