Question

如何使用JavaScript或jQuery设置或更改图像？ src标记的img属性id小于或等于3（即img，id为1,2,3）更改为（或设置为）花卉图片，然后img标签的id标签为{5}，其中4,5,6为动物图片，而img的ID为6以上（即，7,8）是默认图像。

我想使用小于和大于运算符（＆lt;和＆gt;）来执行此操作，但我不想使用按钮。我希望它在更新图像时自动发生。这可能吗？

我试图这样做，但它无法正常工作。

<div id="image"> 
<img id="img-1" src="..... "/> 
<img id="img-2" src="..... "/>
<img id="img-3" src="..... "/> 
<img id="img-4" src="..... "/> 
<img id="img-5" src="..... "/> 
<img id="img-6" src="..... "/> 
<img id="img-7" src="..... "/> 
<img id="img-8" src="..... "/> 
</div>

请使用让我理解的图片回答完整的代码。

Answer 1

很难理解你在寻找什么。考虑在您的问题中添加一些细节。但是：我举了一个例子，说明你至少可以改变src或图像。

最简单的方法（不是最佳或最智能的方式）是更改图片上的src属性。我做了一个小提示来表明我的意思。 https://jsfiddle.net/nbhey2nz/简而言之：当您单击第一个按钮时，它会更改图像1-3上的src。当您单击第二个按钮时，它会更改图像4-6上的src。

HTML：

<div id="image">
 <img id="img-1" src="..... " />
 <img id="img-2" src="..... " />
 <img id="img-3" src="..... " />
 <img id="img-4" src="..... " />
 <img id="img-5" src="..... " />
 <img id="img-6" src="..... " />
 <img id="img-7" src="..... " />
 <img id="img-8" src="..... " />
 </div>

 <div>
   <button id="oneToThree">
     Change 1-3
   </button>
   <button id="fourToSix">
     Change 4-6
   </button>
 </div>

jQuery的：

$(function(){
    $("#oneToThree").click(function(){
    $("#img-1").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
    $("#img-2").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
    $("#img-3").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
  });

  $("#fourToSix").click(function(){
    $("#img-4").attr("src","https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
    $("#img-5").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
    $("#img-6").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");

  });
})

UPDATE！如果我正确理解您更新的问题，您希望通过运营商<和>执行此操作吗？

好吧，我更新了我的小提琴以适应您的更新：https://jsfiddle.net/nbhey2nz/2/这次以JavaScript方式进行，因此您可以获得这两个版本。请注意，我将图像ID更改为仅整数，而不是img-1方式。你也可以这样做，但是你必须修剪文字，这不是你所要求的！ ;）

HTML：

<div id="image">
 <img id="1" src="..... " />
 <img id="2" src="..... " />
 <img id="3" src="..... " />
 <img id="4" src="..... " />
 <img id="5" src="..... " />
 <img id="6" src="..... " />

 </div>
 <div>
   <button id="oneToThree">
     Change images
   </button>
 </div>

JS：

$(function(){
    $("#oneToThree").click(function(){

    for(var i = 0; i < document.images.length; i++){
      if(document.images.item(i).id <= 3){
        document.images.item(i).src = "http://www.small-hydro.com/images/home_btn_small.jpg";
      } else if(document.images.item(i).id > 3 && document.images.item(i).id < 6){
        document.images.item(i).src = "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif";
      } else {
        document.images.item(i).src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png";
      }
    }
  });
})

Answer 2

    **Just copy and paste this..., Not sure how data is comming. if it is comming through ajax then you need to use setinterval.
Might be it will work, if not please let me know (amitq7000@gmail.com)** 


    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Image change by areraj</title>

      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

      <script>
      $(function() {
        $("#image img#img-1").attr("src","http://www.top13.net/wp-content/uploads/2014/11/2-small-flowers.jpg");
        $("#image img#img-2").attr("src","http://www.top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg");
        $("#image img#img-3").attr("src","http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg");
        $("#image img#img-4").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
        $("#image img#img-5").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
        $("#image img#img-6").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
       });
      </script>
      <style>
      img{width:50px; height:50px; display:inline-block; margin-right:5px;}
      </style>
    </head>
    <body>

    <div id="image"> 
        <img id="img-1" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/> 
        <img id="img-2" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
        <img id="img-3" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/> 
        <img id="img-4" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/> 
        <img id="img-5" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/> 
        <img id="img-6" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/> 
        <img id="img-7" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/> 
        <img id="img-8" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/> 
    </div>

    </body>
    </html>

有条件地根据其id值更改图像源

2 个答案: