Question

所以，已经有一段时间了，因为我不得不做任何jquery，而我却很难回忆起最简单的任务。

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

我的问题是，如果我想单击“查看棕色”并将其替换默认的“ 黑色-黑色”图像等等，我的jquery的外观如何。

在记住语法的过程中，我真正完成的只是show hide和toggle；我猜它类似于图库类型的脚本，但简单得多。

<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();
});

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

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

您已通过.link而不是.lboard-link作为选择器
首先您没有为元素分配任何ID

请参见此小提琴以获得更正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>

您也可以here对其进行测试。

Answer 3

使用js很容易，就像：

<!DOCTYPE html>
<html>
    <head>
        <title>
            Hello
        </title>
    </head>
    <body>
	
	<div id="lboard-black" style="display:none;" class="lactive"><img  style=" height: 200px; width: 50%;" id="pic1"  /></div>
	
	
	<ul>
<li><div class="lblack" onclick='showimg(" https://homepages.cae.wisc.edu/~ece533/images/airplane.png ")'  >view black</div></li>
<li><div class="lbrown" onclick='showimg(" https://homepages.cae.wisc.edu/~ece533/images/arctichare.png ")' >view brown</div></li>
<li><div class="lgrey" onclick='showimg(" https://homepages.cae.wisc.edu/~ece533/images/baboon.png ")' >view grey</div></li>
</ul>
   
        <script type="application/javascript">
            function showimg(srcimg) {
			document.getElementById('lboard-black').style.display = "block";   
			document.getElementById('pic1').src= srcimg ;
        }
        </script>
    </body>
</html>

祝你有美好的一天

在另一个DIV上单击时更改DIV内的图像

3 个答案: