如何根据id显示图像（过滤器）

Question

我想根据选择选项在div中显示图像（onclick =“ DispImg（））我遇到2个问题的

我将图像存储在数组中，并显示所有主题，当您选择一个选项时，它将自动显示具有正确ID的图像。

这是我的脚本：我想向每个图像添加一个ID，但是（setAttribute）方法不起作用，当您选择哪个ID时，脚本将仅显示具有相同ID的图像。

var imgArray = new Array();

var corp = document.getElementById('range_imgs');

imgArray[0] = new Image();
imgArray[0].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.futura-sciences.com%2Fsciences%2Fdefinitions%2Funivers-etoile-3730%2F&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAD";
imgArray[0].setAttribute("id" , "2");


imgArray[1] = new Image();
imgArray[1].src = "https://www.google.com/url?sa=i&url=http%3A%2F%2Fvivre-marrakech.com%2Fblog%2Ffaire%2Fobserver-les-etoiles-a-marrakech%2F&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAI";
imgArray[1].setAttribute("id" , "1");

imgArray[2] = new Image();
imgArray[2].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.numerama.com%2Fsciences%2F537548-au-lieu-detre-avalee-par-un-trou-noir-cette-etoile-sest-echappee-a-toute-vitesse.html&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAN";
imgArray[2].setAttribute("id" , "3");

imgArray[3] = new Image();
imgArray[3].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.geowiki.fr%2Findex.php%3Ftitle%3D%25C3%2589toile&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAS";
imgArray[3].setAttribute("id" , "2");

imgArray[4] = new Image();
imgArray[4].src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.futura-sciences.com%2Fsciences%2Fquestions-reponses%2Fespace-quest-ce-quune-etoile-157%2F&psig=AOvVaw2EmQPZg6y4m5Ap-jl4oKQv&ust=1582208140734000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjQluTm3ecCFQAAAAAdAAAAABAX";
imgArray[4].setAttribute("id" , "1");


  for(var i=0;i<imgArray.length;i++){
    var imges = document.createElement("img");
      imges.src = imgArray[i].src;
      imges.style.marginRight = "15px";
      corp.appendChild(imges);
  }

  function appFilter(ele){

      var pics = document.querySelectorAll("img");

          if(pics.id == "1"){

          }

  }

<form>
  <select id="allimgs" name="allimmages" >
      <option value="1et" onclick="appfilter(1)">img with id=1</option>
      <option value="2et" onclick="appfilter(2)">img with id=2</option>
      <option value="3et" onclick="appfilter(3)">img with id=3</option>
  </select>
</form>
<div id="range_imgs">
</div>

谢谢！

Answer 1

您可以只用.id代替setAttribute，但两者都可以正常工作