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