Javascript onclick菜单更改背景颜色答案

【问题标题】：Javascript onclick menu change background colorsJavascript onclick菜单更改背景颜色
【发布时间】：2015-07-13 19:02:31
【问题描述】：

我的菜单是这样的：

https://jsfiddle.net/23r4q610/

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

$('#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，还是有更好的方法来做到这一点？

【问题讨论】：

标签： javascript jquery css menu

【解决方案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

【讨论】：

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

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我会避免将颜色名称硬编码到 HTML ID 中。而是使用 CSS 类名，如“selected”，并在你的 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");
}

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

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

【讨论】：

【解决方案4】：

您可以将代码减少到只有 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/

【讨论】：