更改當前活動項目上的圖像路徑（僅限一次）

Question

我得到了幾個塊，每個塊在單擊時顯示帶有文本的div。活動模塊本身也改變了類，所以單擊元素的背景顏色只有藍色。在圖塊中，圖像需要在激活時顯示不同的圖像（與正常路徑相同，但僅在末尾帶有字母'W'，例如：img/images/img1.jpg變成img/images/img1W.jpg ）。

我目前的jQuery：

<script> 
$(document).ready(function() { 
    $('.servicemark').click(function() { 
     console.log($(this).attr('data-toggle')); 
     var type = $(this).attr('data-toggle'); 
     $('.' + type).slideToggle("slide").siblings(".close1").hide(); 
     $(this).toggleClass("blauwblok").siblings().removeClass('blauwblok'); 
     }); 
}); 
</script> 

我的HTML標記（該數據切換與它的別名是一樣的，在文字的div類）：

<section class="def-section home-services"> 
    <div class="container"> 
     <div class="row"> 
     <?php 
     foreach($blocks as $block) { 
      $images = json_decode($block->images); 
      echo ' 
      <!-- === SERVICE ITEM === --> 
       <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 servicemark" data-toggle="'.$block->alias.'" style="cursor:pointer;" id="blueblok"> 
      <div class="service-mark-border-top"></div> 
      <div class="service-mark-border-right"></div> 
      <div class="service-mark-border-bottom"></div> 
      <div class="service-mark-border-left"></div> 
        <div class="service"> 
         <div class="service-icon"> 
          <img class="imgblok" src="cms/'.$images->image_intro.'" /> 
         </div> 
         <h3>'.$block->title.'</h3> 
         <div class="service-text"> 
          <p>'.$block->introtext.'</p> 
         </div> 
        </div> 
       </div> 
      '; 
     } 
     ?> 
     </div> 
     <div class="row close1 zee-container-vervoer" style="display:none;"> 
      <div class="text"> 
       <p>Zee container vervoer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p> 
      </div> 
     </div> 
     <div class="row close1 gevoelige-lading" style="display:none;"> 
      <div class="text"> 
       <p>Speciale lading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p> 
      </div> 
     </div> 
     <div class="row close1 temperatuur-gevoelige-lading" style="display:none;"> 
      <div class="text"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p> 
      </div> 
     </div> 
     <div class="row close1 explosieve-lading" style="display:none;"> 
      <div class="text"> 
       <p>Gevaarlijke stoffen Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut molestie felis est non est. Fusce dictum pulvinar nulla. Maecenas tincidunt vehicula enim, a porttitor magna mattis vel. In id erat in urna ornare porttitor. Aenean a hendrerit elit.</p> 
      </div> 
     </div> 
    </div> 
</section> 

我嘗試添加以下代碼：

$(".imgblok").each(
     function(){ 
       p = $(this).attr('src'); 
       newp = p.replace('.png','W.png'); 
       $(this).attr('src',newp); 
      } 
     ); 

但是，無論何時單擊，這會一直添加W。當沒有W存在時，我只需要將它改變一次，否則路徑停止工作。爲了測試起見，我只是給img標籤添加了一個類'imgblok'，但我只需要在活動（單擊）元素上改變路徑。我怎樣才能做到這一點？

Answer 1

您可以通過文檔click event來檢查此項，並通過示例檢查W是否始終位於url中，並且substr。

$(document).on("click",".imgblok", function(){ 
 
    p = $(this).attr("src") 
 
    if(p.substr(p.length-5,1) != "W"){ 
 
    $(this).attr("src",p.replace(".jpg","W.jpg")) 
 
    }else{ 
 
    console.log("Always W") 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="imgblok" src="http://phaser.io/images/examples/2/thumb/bitmapdata/replace-color.jpg" />

Answer 2

你並不需要通過所有圖像進行迭代。請修改點擊事件處理程序中的src屬性。

$('.imgblok').on('click', function() { 
    var src = $(this).attr('src'); 
    if (src.indexOf('W.png') === -1) { 
     var newSrc = src.replace('.png', 'W.png'); 
     $(this).attr('src', newSrc); 
    } 
})