JavaScript oder jQuery-Datei mit dem gleichen Skript verschiedenen Ort ist anders

Question

Ich habe ein Problem mit jQuery oder JavaScript. Ich benutze Bootstrap CSS Framework. In diesem Problem habe ich ein gleiches Skript, das ich an anderer Stelle gesetzt habe. aber das Skript funktioniert überhaupt nicht. Sie können sehen, dass das abgeschnitten ist, um mir zu helfen. Ich benutze Bootstrap CSS Framework ich bezweifle, und ich weiß nicht, wie man das gleiche Skript mit verschiedenen Platz in der Seite ist anders. Ich verstehe nicht mit dem letzten. hoffe du verstehst es. Danke im Voraus!

/* this the script.js */ 
 

 
$("#image").find("img").each(function(){ 
 
     var $this = $(this), 
 
      getClass = $this.attr('img') 
 
      splitClass = $this.prop('id').split("-") 
 
      if(splitClass[1] <= 20) { 
 
       $this.attr("src", "http://lorempicsum.com/futurama/350/200/1"); 
 

 
      } else if(splitClass[1] >= 40) { 
 
       $this.attr("src", "http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg"); 
 

 
      } else { 
 
       $this.attr("src", "http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg"); 
 
      } 
 
     }); 
 
\t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
\t <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12"> 
 
\t \t <div id="image"> 
 
\t \t \t <div class="thumbnail"> 
 
\t \t \t \t <img id="img-1" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif" /> 
 
\t \t \t </div> 
 
\t \t \t <div class="thumbnail"> 
 
\t \t \t \t <img id="img-2" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif" /> 
 
\t \t \t </div> 
 
\t \t </div> 
 
<!---this the script----> 
 
    <script src="script.js"></script> 
 
\t </div> 
 
</div> 
 
<!------ Many Text in here ------------> 
 
\t <p>the script in top is working but the script in bottom is not working because there is same script. how can i set be same work. with only one script the text must be in here. help me</p> 
 
\t \t 
 
<!----------------------> \t 
 
<div class="row"> 
 
\t <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12"> 
 
\t \t <div id="image"> 
 
\t \t \t <div class="thumbnail"> 
 
\t \t \t \t <img id="img-3" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif" /> 
 
\t \t \t </div> 
 
\t \t \t <div class="thumbnail"> 
 
\t \t \t \t <img id="img-4" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif" /> 
 
\t \t \t </div> 
 
\t \t </div> 
 
<!---this the same script with the top script----> 
 
    <script src="script.js"></script> 
 
\t </div> 
 
</div>

Answer 1

dies stattdessen versuchen:

$("#image img").each(function(){ 
    var $this = $(this), 
    getClass = $this.attr('img') 
    splitClass = $this.prop('id').split("-") 
    if(splitClass[1] <= 20) { 
     $this.attr("src", "http://lorempicsum.com/futurama/350/200/1"); 

    } else if(splitClass[1] >= 40) { 
     $this.attr("src", "http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg"); 

    } else { 
     $this.attr("src", "http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg"); 
    } 
}); 

Fiddle

--- In Ihrem ursprünglichen Code $("#image").find("img") würde die erste div mit id #image nur wählen. Während $("#image img") wird alle img s, die ein Kind eines Elements mit der ID #image sind.

Warum find() scheint nicht auf jedes Element von $("#image") zurückgegeben zu arbeiten Ich bin mir nicht sicher. Wenn jemand das erklären kann, würde ich es gerne hören. ---

Wie Pete darauf hingewiesen hat, war der ursprüngliche Selektor eine ID, die nur das erste übereinstimmende Element zurückgibt. Sehen Sie sich die Lösung an, die stattdessen eine Klasse verwendet.

bearbeiten

Wie bereits ausgeführt wurde, sollte IDs eindeutig sein. Unten ist eine bessere Lösung, in der doppelte IDs nicht verwendet werden.

$(".image img").each(function() { 
    var $this = $(this), 
     getClass = $this.attr('img') 
    splitClass = $this.prop('id').split("-") 
    if (splitClass[1] <= 20) { 
     $this.attr("src", "http://lorempicsum.com/futurama/350/200/1"); 

    } else if (splitClass[1] >= 40) { 
     $this.attr("src", "http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg"); 

    } else { 
     $this.attr("src", "http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg"); 
    } 
}); 

Fiddle