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

如何使用JavaScript或jQuery设置或更改图像？id小于或等于3的

img

标签的

src

属性（即id为1、2、3的

img

应更改为（或设置为）花卉图像，id为4、5、6的

img

标签的

img

属性应为动物图像，id大于6的

img

标签的

（即，7，8）是默认图像

我想使用小于运算符（<和>）和大于运算符（<和>）执行此操作，但我不想使用按钮。我希望在更新图像时自动执行此操作。这可能吗

我试着这样做，但不起作用

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



请用完整的代码回答我所理解的图像。
 
很难理解你在寻找什么。考虑在你的问题中添加一些细节。但是：我举了一个例子，说明你至少可以改变SRC或一个图像。
最简单的方法（不是最好的，也不是最聪明的方法）是更改图像上的
src
属性。我做了一个小提琴来说明我的意思。简而言之：当你单击第一个按钮时，它会更改图像1-3上的src。当你单击第二个按钮时，它会更改图像4-6上的src

HTML:


更新！
如果我正确理解了您更新的问题，您希望与操作员一起执行此操作，对吗

嗯，我更新了我的提琴以适应您的更新：这次是以JavaScript方式进行的，所以您可以得到两个版本。请注意，我只将图像ID更改为整数，而不是
img-1
方式。您也可以这样做，但随后您必须修剪文本，这不是您所要求的！；）

HTML:


更改图像

JS:

$（函数（）{
$（“#一棵树”）。单击（函数（）{
对于（var i=0；i
**只需复制并粘贴此…，不确定数据是如何传送的。如果它是通过ajax提交的，那么您需要使用setinterval。
可能会有用，如果不行请告诉我(amitq7000@gmail.com)** 
阿雷拉吉的影像改变
$（函数（）{
$（“#图像img#img-1”）.attr（“src”，”http://www.top13.net/wp-content/uploads/2014/11/2-small-flowers.jpg");
$（“#图像img#img-2”）.attr（“src”，”http://www.top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg");
$（“#图像img#img-3”）.attr（“src”，”http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg");
$（“#图像img#img-4”）.attr（“src”，”http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$（“#图像img#img-5”）.attr（“src”，”http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$（“#图像img#img-6”）.attr（“src”，”http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
});
img{宽度：50px；高度：50px；显示：内联块；右边距：5px；}
看起来不像有效的html。请向我们提供真实的代码。小于3意味着什么，并发布代码，您到目前为止尝试了什么（Javascript/jquery）。不完全确定要问什么，请更清楚地说明您希望Javascript做什么。我能理解的是，它看起来像是某种旋转木马。如果是这样的话，就用猫头鹰转盘吧。是的，我想用，但我不用按钮。我希望在更新图像时自动更新它。那是罐头吗？当然可以！只需在JavaScript中使用计时事件。请在此处阅读更多信息：
<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>

$(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");

  });
})

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

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

    **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>