更改DIV内部的图像，单击另一个DIV

Question

因此，我已经有一段时间没有做任何jquery的事情了，我很难回忆起最简单的任务。

我有一个带有默认图像的DIV，当我点击页面上的安莉链接时，我希望它能改变这个图像。

我的问题是，如果我想单击'view‘并让它替换默认的'lboard-black’映像，那么jquery是什么样子的呢？

在试图记住语法方面，我真正完成的是显示、隐藏和切换；我想，它类似于图片库类型的脚本，但要简单得多。

<style>
.lactive{display:block;}
</style>

图像容器：

<div id="StuffandThings">
<div id="lboard-black" style="display:none;" class="lactive"><img src="" /></div>
<div id="lboard-brown" style="display:none;"><img src="" /></div>
<div id="lboard-grey" style="display:none;"><img src="" /></div>
</div>

链接容器：

<ul>
<li><div class="lblack">view black</div></li>
<li><div class="lbrown">view brown</div></li>
<li><div class="lgrey">view grey</div></li>
</ul>

这就是我最初尝试使用的：http://jsfiddle.net/wsfy5uo2/

Answer 1

Jquery方法就可以了。使用类似于下面的代码的https://api.jquery.com/click/可能有效，但您可以考虑使用元素ID

$(".lblack").click(function(){
$("#StuffandThings div").hide();
$("#lboard-black").show();
});
$(".lbrown").click(function(){
$("#StuffandThings div").hide();
$("#lboard-brown").show();
});
$(".lgrey").click(function(){
$("#StuffandThings div").hide();
$("#lboard-grey").show();
});

见小提琴https://jsfiddle.net/Ldtosmnx/

更新:你的小提琴有一些问题。

• 您已经传递了.link而不是..lboard link作为选择器
• 首先，您还没有为元素分配任何in

请参阅这把小提琴以获得更正http://jsfiddle.net/kw1rgv23/

Answer 2

您的单击事件出现在错误的类上。应该是.lboard-link而不是.link。还可以使用this而不是e.target来获取data-foil而不是id。

​

$(document).ready(function () {
    $('.lboard-link').on('click', function (e) {
        e.preventDefault();
        var id = $(this).data('foil').toLowerCase();
        $('.lboard-hide').hide();
        console.log(id);
        $('#' + id  + '-lboard').show();
    }); 
});

.lboard-hide:not(:first-child){display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stuffandthings">
<div id="black-lboard" class="lboard-hide">1111</div>
<div id="brown-lboard" class="lboard-hide">2222</div>
<div id="grey-lboard" class="lboard-hide">3333</div>
</div>


<ul>
<li><div data-foil="Black" style="background-color: #000000;" class="lboard-link"> </div></li>
<li><div data-foil="Brown" style="background-color: #8B4513;" class="lboard-link"> </div></li>
<li><div data-foil="Grey" style="background-color: #cccccc;" class="lboard-link"> </div></li>
</ul>

​

您还可以测试它的这里。