[英]Replace div contents using jQuery
I'm looking for a way to replace the image in the featured-image class with the image one clicks in the thumbnail class . 我正在寻找一种方法来替换feature-image类中的图像,只需在缩略图类中单击一下图像。 I want to implement this using jquery ... I have been trying to use the $(selector).replaceWith() function but that doesnt work as expected.
我想用jquery实现这个...我一直在尝试使用$(selector).replaceWith()函数,但是它没有按预期工作。 Below is my markup
下面是我的标记
<div class = "image-slider">
<div id = "featured-image">
<img src = "truck.jpg">
</div>
<ul class = "thumbnail">
<li><img class = "small-image" src = "images/1.jpg" ></li>
<li><img class = "small-image" src = "images/2.jpg" ></li>
<li><img class = "small-image" src = "images/3.jpg" ></li>
<li><img class = "small-image" src = "images/4.jpg" ></li>
<li><img class = "small-image" src = "images/5.jpg" ></li>
</ul>
</div>
Anyone with a solution that works without removing the clicked item from the unordered list? 有没有从无序列表中删除被点击项目的解决方案的任何人? The solution should also allow one to switch the image multiple times.
该解决方案还应允许人们多次切换图像。 Thank you.
谢谢。
你可以使用$(selector).html("html string here")
,或者可以传递一个html节点
You can do something like this... Replace src of image in featured-image class on clicking image from thumbnail class. 您可以执行以下操作...在缩略图类中单击图像时,在feature-image类中替换src图像。
$('.thumbnail img').click(function(){
var imgSrc = $(this).attr('src');
$('#featured-image img').attr('src',imgSrc);
})
$('.thumbnail img').on('click', function(e) {
var _el = $(e.currentTarget);
$('#featured-image img').attr('src', _el.attr('src'));
});
You can also set an attribute to help you determine what image you would like to swap out to help make the jquery a bit more readable. 您还可以设置一个属性,以帮助您确定要替换的图像,以帮助使jquery更具可读性。
<div class="image-slider">
<div id="featured-image">
<img src="//image.flaticon.com/icons/svg/147/147127.svg" height="250">
</div>
<ul class="thumbnail">
<li><img class="vehicle" vehicletype="bus" src="//image.flaticon.com/icons/svg/147/147125.svg" height="50"></li>
<li><img class="vehicle" vehicletype="ambulance" src="http://image.flaticon.com/icons/svg/119/119083.svg" height="50"></li>
<li><img class="vehicle" vehicletype="taxi" src="http://image.flaticon.com/icons/svg/147/147123.svg" height="50"></li>
</ul>
</div>
$(document).ready(function (){
$(".vehicle").on('click', function(){
if($(this).attr("vehicletype") == "bus")
{
$("#featured-image").html("<img src='//image.flaticon.com/icons/svg/147/147125.svg' height='250' />");
}
else if ($(this).attr("vehicletype") == "ambulance")
{
$("#featured-image").html("<img src='http://image.flaticon.com/icons/svg/119/119083.svg' height='250' />");
}
else if ($(this).attr("vehicletype") == "taxi")
{
$("#featured-image").html("<img src='http://image.flaticon.com/icons/svg/147/147123.svg' height='250' />");
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.