如何在運行時更改圖像在jQuery

Question

我需要更改每次點擊使用jQuery圖像，可以說，而第一次加載頁面時，它會img1，當我點擊img1它將是img2，並再次如果我點擊IMG2這將b圖1，這應該去... 代碼：

  <div> 
      <span class="myimage"> 
      <img class="img1"src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" /> 
     <img class="img2"src="abcd.jpg" alt="" /> 
      </span> 
      <div> 
       <span> 
       Hello 
      </span> 
      <ul class="myul"> 
       <li>one</li> 
      <li>Two</li> 
       </ul> 
      </div> 
      <span class="myimage"> 
      <img class="img1"src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" /> 
      <img class="img2"src="abcd.jpg" alt="" /> 
      </span> 
      <div> 
       <span> 
       r u there 
      </span> 
      <ul class="myul"> 
      <li>three</li> 
       <li>four</li> 
       </ul> 
      </div> 
      </div> 

的jQuery：

$(document).ready(function() { 

     $(".myul").hide(); 

     $(".myimage").click(function() { 

      if ($(".img2").is(":hidden")) { 
       $(this).next("div").find(".myul").slideToggle(600); 

       $(".img1").hide(); 
       $(".img2").show(); 
      } 
      else { 

       $(this).next("div").find(".myul").slideToggle(600); 
       $(".img2").hide(); 
       $(".img1").show(); 

      } 

     }); 
    }); 

但萬阿英，蔣達清是作爲類是相同的兩個部分是拍攝相同的圖像。當我點擊第一部分時，只有第一部分的圖像應該是c掛起，如何做..許多建議

Answer 1

你可以添加上下文到你的選擇器。

例如$(".img1")成爲$(".img1", this)

$(document).ready(function() { 

    $(".myul").hide(); 

    $(".myimage").click(function() { 

     if ($(".img2", this).is(":hidden")) { 
      $(this).next("div").find(".myul").slideToggle(600); 

      $(".img1", this).hide(); 
      $(".img2", this).show(); 
     } 
     else { 

      $(this).next("div").find(".myul").slideToggle(600); 
      $(".img2", this).hide(); 
      $(".img1", this).show(); 

     } 

    }); 
}); 

Answer 2

您可以使用選擇上尋找與該事件最初射擊元素的DOM元素。

例如，在這種情況下，你可以找到你已附上「click」事件的跨度的孩子：

$(".myimage").click(function() { 
      if ($(this).children(".img2").is(":hidden")) { 
       // do something 
      }