通过单击更改所选项目的背景答案

【问题标题】：Change background of selected item by clicking通过单击更改所选项目的背景
【发布时间】：2014-06-13 05:47:58
【问题描述】：

我有一个问题 - 点击后是否可以更改项目的颜色/背景？

让我们举一个简单的例子：我们有两个盒子，比如：

<a href="#" id="box1"></a>
<a href="#" id="box2"></a>

和三个类的链接：红色、黑色、蓝色。是否可以首先单击其中一个框（以选择/激活它们），然后通过单击正确的链接（带有类的链接）来更改它们的颜色？当我现在在这样一个简单的例子中，我认为它会更容易适应我想要处理的 SVG 图形。

谢谢！

【问题讨论】：

【解决方案1】：

您可以使用 jQUery 来实现相同的目的。创建了Plunker 链接供您参考，如果这是您想要的..

【讨论】：

【解决方案2】：

你可以尝试这样的事情（假设是 jQuery，虽然这也可以用 vanilla javascript 完成）：

为每个盒子添加一个类：

<a href="#" id="box1" class="box">Box 1</a>

然后添加一个事件侦听器，以在单击框时将其标记为“已选中”。

$('.box').on('click', function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

那么，如果你有颜色链接：

<a href="#" class="color-link" data-color="red">Red</a>

你可以像这样在上面放置一个事件：

$('.color-link').on('click', function() {
    $('.selected').css('background', $(this).data('color'));
});

这应该为您更改最后点击框的背景 css。

【讨论】：