Versuchen Sie, JavaScript auf mehr als ein Bild anzuwenden?

Ich versuche, dieses Skript auf mehr als ein Bild auf einer Seite arbeiten zu lassen. Was muss ich tun, um es so zu ändern, dass es mehr als "mapImg" und "img01" betrifft? Ich gehe davon aus, dass dies die Bereiche des Skripts sind, die geändert werden müssen ... Aber das ist die erste js, mit der ich gearbeitet habe ...Versuchen Sie, JavaScript auf mehr als ein Bild anzuwenden?

Sie können eine Probe here sehen. Ich möchte, dass die anderen Bilder auf dieser Seite das gleiche Verhalten wie das erste Bild haben, wenn sie angeklickt werden (tue so, als wären sie alle unterschiedliche Bilder).

JavaScript:

// Get the modal 

    var modal = document.getElementById('myModal'); 

// Get the image and insert it inside the modal - use its "alt" text as a caption 

    var img = document.getElementById('myImg'); 
    var modalImg = document.getElementById("img01"); 
    var captionText = document.getElementById("caption"); 

    img.onclick = function() { 
     modal.style.display = "block"; 
     modalImg.src = this.src; 
     captionText.innerHTML = this.alt; 
    } 

// Get the <span> element that closes the modal 

    var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 

    span.onclick = function() { 
     modal.style.display = "none"; 
    }

HTML:

<!-- Trigger the Modal --> 
<img id="myImg" src="images/dt_sm.png" alt="Skateboarding in Portland Skidmore Old Town" > 

<!-- The Modal --> 
<div id="myModal" class="modal">` 

    <!-- The Close Button --> 
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 

    <!-- Modal Content (The Image) --> 
    <img class="modal-content" id="img01"> 

    <!-- Modal Caption (Image Text) --> 
    <div id="caption"></div> 

</div>

Details

Hallo, Vielen Dank für Ihre Antworten. Ich kann sehen, dass dieser Teil meiner Frage abgeschnitten wurde und eines der Etiketten, die ich verwendete, ungenau war. Ich muss betonen, dass dies das erste Javascript ist, das ich versucht habe, in meinem Leben zu modifizieren, und obwohl ich den jQuery-Vorschlag schätze, würde ich gerne mein Wissen über das Skript, mit dem ich arbeite, im Moment unter meinem Gürtel bekommen, bevor ich umziehe zu anderen Wegen, mit dem Problem umzugehen. Es sieht für mich so aus, als ob dieses Skript nur mit einem Bild css stying (myImg) und drei oder vier (myImag, hisImag, itsImag usw.) erstellt werden soll. Das Skript ist auch für eine Bildvariable img01 eingestellt und ich möchte es Effekt 4 oder 5 Bilder auf der Seite (img01, img02, img03 etc), mit dem gleichen modalen Styling und Aktionen. Anstatt also das Skript vier- oder fünfmal zu kopieren und die Variablen zu ändern (und ich bin mir nicht sicher, ob Sie das auf einer einzigen Seite tun können?), Möchte ich Dieses spezielle Skript auf mehr als einen Satz von Variablen anwenden Moment scheint es für nur einen fest verdrahtet zu sein? Ich weiß, dass dies wahrscheinlich wie Baby-Schritt-Fragen aussieht ... Aber ich fürchte, das ist, wo ich momentan mit Javascript bin. Wenn du also antwortest, erinnere ich mich nur ein paar Sätze in der Sprache, die du sprichst ... Danach viertel Ich werde dieses Zeug viel besser verstehen .... Danke für Ihre Hilfe

Quelle

2016-11-22 dmengstrom

die 'id' ** ** einzigartig – Weedoze

Ihre Frage sein sollte, ist nicht ganz klar ... versuchen Sie das gleiche Javascript mehrere Modalverben, oder eine leicht modifizierte Version auf verschiedenen modals laufen? –

versuchen Sie es mit 'class' anstelle von' ID' für Bilder – pradeep1991singh

Mit jQuery können Sie das Umschalten von Bildern erreichen.

<!DOCTYPE html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <script> 
     $(document).ready(function(){ 
      $("#close01").click(function(){ 
       $("#img01").toggle(); 
      }); 

      $("#close02").click(function(){ 
       $("#img02").toggle(); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <!-- Trigger the Modal --> 
    <div id="myModal" class="modal"> 
     <span id="close01" >&times;</span> 
     <img class="modal-content" id="img01" src="img01.png"> 
    </div> 

    <div id="myModal" class="modal"> 
     <span id="close02" >&times;</span> 
     <img class="modal-content" id="img02" src="img02.png"> 
    </div> 
</body> 
</html>

Quelle

2016-11-22 15:31:21 shivam

Hallo, Danke für Ihre Antworten. Ich kann sehen, dass dieser Teil meiner Frage abgeschnitten wurde und eines der Etiketten, die ich verwendete, ungenau war. Ich muss betonen, dass dies das erste Javascript ist, das ich versucht habe, in meinem Leben zu ändern, und obwohl ich den Vorschlag von jQuery zu schätzen weiß. Ich würde gerne mein Wissen über das Skript, mit dem ich gerade arbeite, unter die Lupe nehmen, bevor ich zu anderen Wegen übergehe, mit dem Problem umzugehen. – dmengstrom

Versuchen Sie, JavaScript auf mehr als ein Bild anzuwenden?

Antwort

Verwandte Themen