单击更改所选项目的背景

Question

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

我们有一个简单的例子： 我们有两个方框，如：

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

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

谢谢！

Answer 1

你可以尝试这样的事情（假设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。

Answer 2

您可以使用jquery来实现相同的目标。如果您愿意，可以创建Plunker链接供您参考。