javascript - 更改另一个 DIV 的 DIV onclick 内的图像

Question

所以，自从我不得不做任何 jquery 以来已经有一段时间了，我很难记忆起最简单的任务。

我有一个包含默认图像的 DIV，我希望它在我单击页面上的 LI 链接时更改该图像。

我的问题是，如果我想单击“view brown”并用它替换默认的“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 click 方法就可以了。 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();
});

见 fiddle https://jsfiddle.net/Ldtosmnx/

更新:你的 fiddle 有一些问题

• 您已通过 .link 而不是 .lboard-link 作为选择器
• 您一开始还没有为您的元素分配任何 ID

请参阅此 fiddle 以进行更正 http://jsfiddle.net/kw1rgv23/