JavaScript或jQuery文件用相同的脚本放置不同的地方

JavaScript or jQuery file with same script different place its different

本文关键字：脚本 文件 JavaScript jQuery      更新时间：2024-03-22

我对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>

试试这个：

$("#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")将选择作为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

相关文章：