Javascript 使用jQuery替换div内容

我正在寻找一种方法，用单击缩略图类中的图像替换特色图像类中的图像。我想用jquery实现这个功能。。。我一直在尝试使用$（选择器）.replaceWith（）函数，但效果并不理想。下面是我的标记

<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>

---

有没有人有一个解决方案，可以在不从无序列表中删除已单击项的情况下工作？该解决方案还应允许用户多次切换图像。谢谢。

您可以使用

$（选择器）.html（“此处的html字符串”）

，或者可以传递html节点您可以使用jquerys

.attr（）

函数更改属性

src

。 示例：

$（选择器）.attr（“src”，“您的图像文件”）

这里有一个。
你可以这样做。。。
单击缩略图类中的图像时，替换特征图像类中图像的src

$('.thumbnail img').click(function(){
  var imgSrc = $(this).attr('src');
  $('#featured-image img').attr('src',imgSrc);
})

您还可以设置一个属性，以帮助确定要交换的图像，从而使jquery更具可读性








$（文档）.ready（函数（）{
$（“.vehicle”）。在（'click'，function（）{
如果（$（this）.attr（“车辆类型”）=“总线”）
{  
$（“#特色图片”）.html（“”）；
}
else if（$（this）.attr（“车辆类型”）=“救护车”）
{ 
$（“#特色图片”）.html（“”）；
}
else if（$（this）.attr（“车辆类型”）=“滑行”）
{ 
$（“#特色图片”）.html（“”）；
}
}); 
});
在此实例中，如何传递html节点以替换图像？？
$('.thumbnail img').on('click', function(e) {
    var _el = $(e.currentTarget);
    $('#featured-image img').attr('src', _el.attr('src'));
});

<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' />");
          }
    }); 
});