使用foo颜色框更改图像
使用foo颜色框更改图像
提问于 2016-06-20 01:09:40
每当我点击foo颜色框时，是否有可能在容器div中显示图像？如果是的话，谁能告诉我怎么做吗？我需要知道javascript将会是什么，我不知道如何使用javascript来完成这个工作。
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.white {
background: #FFFFFF;
}
.yellow {
background: #FAFF38;
}
.orange {
background: #FFA200;
}
.red {
background: #FF0000;
}
.dorange {
background: #FF5500;
}
.lgreen {
background: #80FF00;
}
.green {
background: #45C731;
}
.turk {
background: #17DDBC;
}
.lblue {
background: #00A2FF;
}.blue {
background: #1713F6;
}.purple {
background: #AB09D3;
}.black {
background: #000000;
}<div id="colour">
<div class="foo white" data-image="http://mebe.co/mustang">
</div>
<div class="foo black" data-image="http://mebe.co/ford">
</div>
<div class="foo yellow" data-image="http://mebe.co/f150">
</div>
<div class="foo orange" data-image="http://mebe.co/yukon">
</div>
<div class="foo red" data-image="http://mebe.co/370z">
</div>
<div class="foo dorange" data-image="http://mebe.co/gtr">
</div>
<div class="foo lgreen" data-image="http://mebe.co/sentra">
</div>
<div class="foo green" data-image="http://mebe.co/dodge">
</div>
<div class="foo turk" data-image="http://mebe.co/civic">
</div>
<div class="foo lblue" data-image="http://mebe.co/gmc">
</div>
<div class="foo blue" data-image="http://mebe.co/bmw">
</div>
<div class="foo purple" data-image="http://mebe.co/sentra">
</div>
</div>
<div class="container" style="background-color:lightgrey; border-width:1px; border-style:solid; width:500px; height:500px; z-index:1; visibility:; float: left; visibility:; background-color: lightgrey;visibility:;"></div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-20 01:27:34
您可以这样做，只需更新data-image。
$(document).ready(function() {
$('.foo.active').each(function(){
$('.container img').attr('src', $(this).data("image"));
});
$('.foo').on('click',function(){
$('.container img').attr('src', '');
$('.container img').attr('src', $(this).data("image"));
});
});.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
cursor: pointer;
}
.white {
background: #FFFFFF;
}
.yellow {
background: #FAFF38;
}
.orange {
background: #FFA200;
}
.red {
background: #FF0000;
}
.dorange {
background: #FF5500;
}
.lgreen {
background: #80FF00;
}
.green {
background: #45C731;
}
.turk {
background: #17DDBC;
}
.lblue {
background: #00A2FF;
}
.blue {
background: #1713F6;
}
.purple {
background: #AB09D3;
}
.black {
background: #000000;
}
.container {
border-width: 1px;
border-style: solid;
width: 500px;
z-index: 1;
float: left;
}
.container img{
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="colour">
<div class="foo white active" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png">
</div>
<div class="foo black" data-image="http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png">
</div>
</div>
<div class="container">
<img src="" alt="sample">
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37913443
复制相关文章
相似问题
腾讯云开发者
