在几个上更改一个 DIV 颜色

Question

我正在尝试通过单击其中一张图片来更改 div 的背景颜色。 新的 DIV 颜色应该是图像 id 的第二部分。

CSS

#box {
width: 200px;
height: 200px;
background-color: #3FA5D5;
}
.black {
background-color: #000000 !important;
}
.red {
background-color: #990000 !important;
}
.blue {
background-color: #990000 !important;
}
.green {
background-color: #990000 !important;
}

HTML

<div id="box">BGCOLOR TO CHANGE HERE</div>
<br />
<img id="color black" src="images/black.png" alt="" />
<img id="color red" src="images/red.png" alt="" />
<img id="color blue" src="images/blue.png" alt="" />
<img id="color green" src="images/green.png" alt="" />

Answer 1

您的 ID 值无效。使用数据属性来存储“元数据”（例如颜色名称或十六进制值等）：

例如：

<img class="color" data-color="black" src="images/black.png" alt="" />

然后代码简化为：http://jsfiddle.net/TrueBlueAussie/43txyxeg/

$('img.color').click(function(){
    $('#box').removeClass("black red blue green").addClass($(this).data('color'));
});

通常最好使用类来设置样式（正如您所做的那样，但是如果您只是更改颜色，则可以简化代码并丢弃样式：

http://jsfiddle.net/TrueBlueAussie/43txyxeg/2/

$('img.color').click(function(){
    $('#box').css({"background-color": $(this).data('color')});
});

注意：数据属性方法意味着您可以使用任何颜色值（甚至是十六进制颜色）：例如

http://jsfiddle.net/TrueBlueAussie/43txyxeg/5/

<img class="color" data-color="#123456" src="images/blah.png" alt="" />

Answer 2

我想您希望能够在单击相应图像时更改 div 的颜色。你可以做的事

$('img.color').click(function(){
    $('#box').css('backgroundColor', this.src.split('/')[1].split('.')[0]);
});

当然，您需要将id 更改为class，因为这就是您使用它的方式。

Answer 3

Example

您的代码有一些问题，请查看示例。

我已更新您的 html 以使用类和数据属性。

<div id="box">BGCOLOR TO CHANGE HERE</div>
<br />
<img class="color-select" data-color="black" src="images/black.png" alt="" />
<img class="color-select" data-color="red" src="images/red.png" alt="" />
<img class="color-select" data-color="blue" src="images/blue.png" alt="" />
<img class="color-select" data-color="green" src="images/green.png" alt="" />

添加了需要 Jquery 的 javascript。

$(document).ready(function() {
    $('.color-select').click(function() {
        $('#box').css("background",$(this).data("color"));
    });

});

Answer 4

id 元素不应包含空格 - 假设您的图像名称是有效的 css 颜色名称，如示例所示，您可以这样做：

$(function (e) {
    $("img").click(function(){
        var color = this.src.substring(this.src.lastIndexOf('/')+1,this.src.lastIndexOf('.'));
        $("#box").css("background",color);
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">BGCOLOR TO CHANGE HERE</div>
<br />
<img id="color black" src="images/black.png" alt="blabk" />
<img id="color red" src="images/red.png" alt="red" />
<img id="color blue" src="images/blue.png" alt="blue" />
<img id="color green" src="images/green.png" alt="green" />