Question

我正在寻找一种方法来替换精选图像类中的图像，并在缩略图类中单击该图像。我想使用jquery实现这个...我一直在尝试使用 $（selector）.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>

任何有解决方案但没有从无序列表中删除被点击的项目的人？该解决方案还应允许人们多次切换图像。谢谢。

Answer 1

您可以使用$(selector).html("html string here")，也可以传递html节点

Answer 2

你可以这样做...... 在缩略图类中单击图像时，替换feature-image类中的src图像。

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

Answer 3

$('.thumbnail img').on('click', function(e) {
    var _el = $(e.currentTarget);
    $('#featured-image img').attr('src', _el.attr('src'));
});

Answer 4

您可以使用jquerys src功能更改属性.attr()。示例：$(selector).attr("src", "your image file");

这是reference。

Answer 5

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

Image Swap Example

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

使用jQuery替换div内容

5 个答案: