JavaScript或jQuery文件具有相同的腳本不同的地方不同

Question

我有jQuery或JavaScript的問題。我使用引導CSS框架。在這個問題中，我有一個相同的腳本，我放在不同的地方。但腳本根本不起作用。你可以看到剪切幫助我。我使用引導CSS框架我懷疑，我不知道如何使不同的地方在頁面中的所有相同的腳本是不同的。我不明白最後一個。希望你的理解。提前致謝！

/* 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

試試這個：

$("#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

---在你原來的代碼$("#image").find("img")只會id爲#image選擇第一div。而$("#image img")將選擇所有img s，它們是編號爲#image的元素的子元素。

爲什麼find()似乎無法在由$("#image")返回的每個元素上工作我不確定。如果有人可以解釋這個，我很樂意聽到它.---

正如Pete指出的，原始選擇器是一個只返回第一個匹配元素的id。請參閱下面使用類的解決方案。

編輯

正如已經指出的那樣，ID應該是唯一的。下面是不使用重複ID的更好的解決方案。

$(".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