使用jQuery替換div內容

Question

我正在尋找一種方法來替換feature-image類中的圖像，只需在縮略圖類中單擊一下圖像。 我想用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 .attr()函數更改屬性src 。 示例： $(selector).attr("src", "your image file");

這是一個參考 。

Answer 5

您還可以設置一個屬性，以幫助您確定要替換的圖像，以幫助使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' />");
          }
    }); 
});