onclickを使用して複数の画像を変更する

red1、green1、blue1という3つの異なる画像があります。 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

これは、動的なソリューションで、ユーザーが指定1などと任意の2要素自体の各状態のイメージですので、属性を読み込んでソースイメージを変更するだけです。

は、デフォルトでは、すべての画像がオフ状態

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を交換してください。
その後、画像を反復しなければならない、と他の画像にも同じことを行うが、交換

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を使用して複数の画像を変更する

答えて

関連する問題