wie man mehrere Bilder mit einem einzelnen Klicken ändert

Question

Im wirklich neu zu Javascript, und während ich lerne, versuche ich, Bilder in einer Galerie zu anderen mit einer onclick Funktion zu ändern. Ich habe Links zu verschiedenen Galerien. Wenn ich auf den Link 1 klicke, sind die Imgs one1.jpg, one2.jpg und so weiter. Wenn ich auf 2 Link klicken, imgs ist two1.jpg, two2.jpg usw.

Dies ist die grobe Skript, das ich für Link 1 gemacht:

<script> 
    function one() { 
    document.getElementById("foto1").src="one1.jpg"; 
    document.getElementById("foto2").src="one2.jpg"; 
      } 
</script> 


<a href="#" onclick="one()">Link 1</a> 
<a href="#" onclick="two()">Link 2</a>  
<img id="foto1" src="tre1.jpg"></a> 
<img id="foto2" src="tre2.jpg"></a> 

usw.

ich eine andere gemacht Funktion namens zwei() für die zweite Verbindung mit dem gleichen Inhalt, aber ändern src, was ich will. Und für jeden Link, den ich hinzufüge, kopiere ich das Skript und ändere es ein wenig. Ich weiß, dass es einen Weg gibt, um ein einzelnes Skript mit Variablen oder etwas zu optimieren. Irgendwelche Hilfe? Danke

Answer 1

Um eine Gruppe von Bildern zu unterscheiden, muss es ein Muster geben. versuchen, eine Klasse für jeden img-Tag hinzufügen Bilder zum Ändern ihrer Quelle zu unterscheiden, und die können Sie eine Schleife durch Bilder wie folgt:

<a href="#" onclick="one()">Link 1</a> 
    <a href="#" onclick="two()">Link 2</a>  
    <img class="img1" id="foto1" src="foto1.jpg"> 
    <img class="img1" id="foto2" src="foto1.jpg"> 

    <img class="img2" id="foto3" src="pic1.jpg"> 
    <img class="img2" id="foto4" src="pic2.jpg"> 
    <script> 
    function one() { 
     var img = document.getElementsByClassName("img1"); 
     for (var i in img) { 
      img[i].src = "foto" + 1 + ".jpg" 
     } 
    } 

    function two() { 
     var img = document.getElementsByClassName("img2"); 
     for (var i in img) { 
      img[i].src = "pic" + 1 + ".jpg" 
     } 
    } 
    </script>