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");
    }
});

Fiddle

---在您的原始代码中 $("#image").find("img") 只会选择 id # 的第一个 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");
    }
});

Fiddle