Question

求JS代码，实现选择li里的颜色值和图片，并以背景色和背景图片显示另一个div里

<div id="front_show"> //需要显示背景色和背景图的div
<div id="clipart1show"></div>
<div id="frontshowmessage" title="FRONT MESSAGE">FRONT MESSAGE</div>
</div>
<div id="showcolor"> //选择背景色显示在 id="frontshowmessage"

<ul class="1bcolor_selectGroups" style="text-align:left">
<li style="background:#F5DE00">Yellow C</li>
<li style="background:#9D37B6">Purple C</li>
<li style="background:#42119C">Violet C</li>
</ul> </div>
<div id="clipart1"> //选择背景图片显示在 id="clipart1show"
<ul class="1clipart_selectGroups" style="text-align:left">
<li><a href="javascript:void(0)"><img src="images/clipart/Anchor.png" style="max-width:70px;max-height:70px;"></br>Anchor</a></li>
<li><a href="javascript:void(0)"><img src="images/clipart/Angel.png" style="max-width:70px;max-height:70px;"></br>Angel</a></li>
<li><a href="javascript:void(0)"><img src="images/clipart/Apple.png" style="max-width:70px;max-height:70px;"></br>Apple</a></li>
</ul> </div>

Answer 1

如果你的事件是点击事件的话，我就用jquery给你写了

$("#showcolor ul li").click(function(){
    $("#frontshowmessage").css(backgroundColor,$(this).css("backgroundColor"));
});
$("#clipart1 ul li").click(function(){
    $(this).find("img").clone().appendTo($("#clipart1show"));
});

追问

是点击的，那么开头是不是要加...

追答

如果你把这些写在html页面中，肯定要加标签。前提是你必须引入jquery库

Answer 2

//在你的代码后面加入以下内容即可：
<script src="http://vod.xunlei.com/library/jquery-1.7.2.min.js"></script> //这个jQuery库自己找一个也行
<script>
$(function(){
$("ul.1clipart_selectGroups li").click(function(){
$("div#clipart1show").css({width:150,height:100}).css("background-image","url("+$(this).find("img").attr("src")+")"); //先改一下高宽，以免看不到效果
});
$("ul.1bcolor_selectGroups li").click(function(){
$("div#frontshowmessage").css("background",$(this).css("background"));
});
});
</script>

追问

如果我只有一个“1clipart_selectGroups”的li列表，但是我要将图片分别在4个不同的div里显示，该怎么改呢？
另外背景色那里，因为我有需要选择3个背景色和1个字体颜色，所以我想在点击选择颜色值之前要先点击选择“背景色1”，“背景色2”，“背景色3”和“字体色”，然后再选择li里的颜色值。

追答

求分，另贴，谢谢

Answer 3

<script>
$("a").on("click", function(){
var text = "<img src=" + $(this).attr("src") + " style='max-width:70px;max-height:70px;'>";

$("#clipart1show").empty().append(text );

});

$("#1bcolor_selectGroups li").on("click", function(){
var col = $(this).css("background");
$("#frontshowmessage").css("background", col );
});

</script>