具有相同脚本的JavaScript或jQuery文件的不同之处在于其不同

Question

我对jQuery或JavaScript有问题。 我使用bootstrap css框架。 在这个问题上，我有一个相同的脚本，我把它放在不同的地方。 但是该脚本根本不起作用。 您可以看到它被抢救了一下。 我怀疑使用bootstrap 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"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12"> <div id="image"> <div class="thumbnail"> <img id="img-1" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif" /> </div> <div class="thumbnail"> <img id="img-2" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif" /> </div> </div> <!---this the script----> <script src="script.js"></script> </div> </div> <!------ Many Text in here ------------> <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> <!----------------------> <div class="row"> <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12"> <div id="image"> <div class="thumbnail"> <img id="img-3" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif" /> </div> <div class="thumbnail"> <img id="img-4" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif" /> </div> </div> <!---this the same script with the top script----> <script src="script.js"></script> </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");
    }
});

小提琴

---在您的原始代码$("#image").find("img") ，只会选择ID为#image的第一个div 。 而$("#image img")将选择ID为#image的元素的子元素中的所有img 。

我不确定，为什么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");
    }
});

小提琴