Question

我有一个问题，我很难找到解决方案。我想用javascript改变我的形象。我的项目中有50张图片。我逐个写了图像ID：

＆＃34;在这个代码示例中，我编写了img src和class，直到img class 50＆＃34;

<div id="image">
    <img src="default.jpg" class="img-1" /> <img src="default.jpg" class="img-21" /> <img src="default.jpg" class="img-41" />  </div>

我的问题是，我如何只使用javascript更改图像与不同的图像？它不是按钮onclick。

img class 1到20，图像是（plant.jpg），img class 21到40，图像是（animal.jpg），img class 41到50，图像是（default.jpg）

有人明白我的意思吗？

如何使用javascript更改源代码？请回答完整和理解的代码，因为我是javascript的新手。

谢谢!!

Answer 1

document.getElementById（＆＃34; YouImgID＆＃34;）。src =＆＃34; NewImgSrc.png＆＃34 ;;

Answer 2

使用此代码，您可以遍历所有img标记

＆＃13;

$('img').each(function(){
alert($(this).attr('id'));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="1" src="smiley.gif" alt="Smiley face" width="42" height="42">
<img id="2" src="smiley.gif" alt="Smiley face" width="42" height="42">
<img id="3" src="smiley.gif" alt="Smiley face" width="42" height="42">
<img id="4" src="smiley.gif" alt="Smiley face" width="42" height="42">
<img id="5" src="smiley.gif" alt="Smiley face" width="42" height="42">
<img id="6" src="smiley.gif" alt="Smiley face" width="42" height="42">
<img id="7" src="smiley.gif" alt="Smiley face" width="42" height="42">
<img id="8" src="smiley.gif" alt="Smiley face" width="42" height="42">
<img id="9" src="smiley.gif" alt="Smiley face" width="42" height="42">
<img id="10" src="smiley.gif" alt="Smiley face" width="42" height="42">

＆＃13;

Answer 3

这里给出了两种方法 -

纯Javascript -

function myFunction() {
    document.getElementById("myImg").src = "http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg";
}

<img id="myImg" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">

<p>Click the button to change the value of the src attribute of the image With Javascript.</p>

<button onclick="myFunction()">Change The Image</button>

的jQuery -

$(document).ready(function(){
    $("button").click(function(){
        $("img").attr("src", "http://www.pxleyes.com/blog/wp-content/uploads/baby/89.jpg");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img src="http://thumbs.dreamstime.com/x/small-baby-posing-1732780.jpg"><br>
<button>Change The Image</button>

更新 -

我举例说明使用ID而不是class更改图片。

仅举例说明一张图片。

如果你喜欢你可以将它用于具有多个ID的多个图像。

ID比此类更适用，因为id仅选择一个元素，但只选择class多个元素。

为此提供了一个视频教程 here 。

可以找到更多W3Schools Tutorial和Mozilla Developer。

Answer 4

条件：

我相信我能正确理解你的问题。
我假设您使用的是jQuery库

在这种情况下，你可以运行每个函数，拆分类并检测数字（例如1或5或10等），然后完成其余的工作。

示例代码：

// Find all images inside "image" id
$("#image").find("img").each(function(){
    var $this = $(this),
        getClass = $this.attr('class'), // get class of this image
      splitClass = getClass.split("-"); // split the class by "-"

      if(splitClass[1] <= 20) {
       // If image class has number equal or below 20 (eg. img-1, img-2....)

        // Update the image source accordingly
        $this.attr("src", "plant.jpg");

      } else if (splitClass[1] <= 40) {
      // If image class has number equal or below 40
        $this.attr("src", "animal.jpg");


     } else {
        // Else condition - Rest of the image

        $this.attr("src", "default.jpg");
      }      

});

您可以在我的jsfiddle找到正在运行的示例。

我希望，它能解决你的问题。

干杯， Jimba

获取图片ID并更改图片JavaScript

4 个答案:

纯Javascript -

的jQuery -

更新 -