使用onclick更改多個圖像

我有三個不同的圖像：red1，green1和blue1。當我點擊red1時，我希望它變成一個名爲red2的圖像。然後，如果我點擊green1，我希望green1更改爲green2，red2更改回red1。等等......這就是邏輯。使用onclick更改多個圖像

我發現一些代碼看起來像它可以成爲我想要完成的基礎，但我無法弄清楚如何修改代碼。我不是一個編碼員......只是在我走的時候想弄清楚這一點。誰能幫忙？下面的代碼：

的javascript：

<script type="text/javascript"> 

var prevSquare; 

function swapImage(thisSquare) 
{ 
if(prevSquare && prevSquare != thisSquare) 
{ 

// Alter prevSquare image (if prevSquare is an <img> element) 
prevSquare.src='images/red1.png'; 
} 

// Alter thisSquare to your active image 
thisSquare.src = 'images/green1.png'; 

// Assign value to previos square 
prevSquare = thisSquare; 
} 

</script>

HTML：

<img src="images/red1.png" onclick='swapImage(this);'</a> 
<img src="images/green1.png" onclick='swapImage(this);'</a> 
<img src="images/blue1.png" onclick='swapImage(this);'</a>

來源

2017-08-26 dlc3172

這是一個動態的解決方案，您指定在元素本身的每個狀態中的圖像，所以只需讀取屬性並更改源圖像即可。

默認情況下，所有圖像都處於關斷狀態

var prevSquare = null; 
 
function swapImage(thisSquare) 
 
{ 
 
    if(prevSquare && prevSquare != thisSquare) { 
 
     // Alter prevSquare image (if prevSquare is an <img> element) 
 
     prevSquare.setAttribute("src", prevSquare.getAttribute("srcOff")); 
 
    } 
 

 
    // Alter thisSquare to your active image 
 
    thisSquare.setAttribute("src", thisSquare.getAttribute("srcOn")); 
 

 
    prevSquare = thisSquare; 
 
}

<img id="redSquare" src="http://via.placeholder.com/100x100/600.png?text=+" 
 
srcOn="http://via.placeholder.com/100x100/f00.png?text=+" srcOff="http://via.placeholder.com/100x100/600.png?text=+" onclick='swapImage(this);'> 
 
<img id="greenSquare" src="http://via.placeholder.com/100x100/060.png?text=+" srcOn="http://via.placeholder.com/100x100/0f0.png?text=+" srcOff="http://via.placeholder.com/100x100/060.png?text=+" onclick='swapImage(this);'> 
 
<img id="blueSquare" src="http://via.placeholder.com/100x100/006.png?text=+" srcOn="http://via.placeholder.com/100x100/00f.png?text=+" srcOff="http://via.placeholder.com/100x100/006.png?text=+" onclick='swapImage(this);'>

來源

2017-08-26 20:04:55

完美解決方案。謝謝！ – dlc3172

使用適當的事件處理程序，然後只需用2更換1在點擊的圖像源。
你就必須遍歷圖像，並且對其它影像做同樣的，但更換任何2與1等

var images = document.querySelectorAll('.img'); 
 

 
images.forEach(function(img) { 
 
    img.addEventListener('click', function() { 
 
    var that = this; 
 
    that.src = that.src.replace('1','2'); 
 
    
 
    images.forEach(function(img2) { 
 
     if (img2 !== that) img2.src = img2.src.replace('2','1'); 
 
    }); 
 
    }) 
 
});

<img src="images/red1.png" class="img" /> 
 
<img src="images/green1.png" class="img" /> 
 
<img src="images/blue1.png" class="img" />

來源

2017-08-26 19:57:21 adeneo

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<div> 
    <div> 
     <img id="red" src="images/red1.jpg" onclick="swap(this.id);"> 
    </div> 
    <div> 
     <img id="green" src="images/green1.jpg" onclick="swap(this.id);"> 
    </div> 
</div> 
</body> 
</html> 

<script type="text/javascript"> 
    function swap(argument) { 
     var element = document.getElementById(argument); 
     var attr_Name = element.getAttribute("src"); 
      attr_Name = attr_Name.split("/").pop(); 
     if(argument =="red"){ 
      if(attr_Name == "red1.jpg"){ 
       document.getElementById(argument).setAttribute("src", "images/red2.jpg"); 
      }else{ 
       document.getElementById(argument).setAttribute("src", "images/red1.jpg"); 
      } 
     } 
     else if(argument =="green"){ 
      if(attr_Name == "green1.jpg"){ 
       document.getElementById(argument).setAttribute("src", "images/green2.jpg"); 
      }else{ 
       document.getElementById(argument).setAttribute("src", "images/green1.jpg"); 
      } 
     } 
    } 
</script>

來源

2017-08-26 20:27:27 Somnath

使用onclick更改多個圖像

回答

相關問題