如何根据id显示图像(过滤器)

Question

我想根据select选项(onclick="DispImg(((在div中显示图像我得到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，但两者都应该可以正常工作

imgArray[x].id = x

你的过滤器也不起作用。用类似的东西替换

pics变量是一个数组，因此pic.id无法在中工作

var pics = document.querySelectorAll("img");
pics.forEach(function(pic) {
if (pic.attr('id') == 2) {
// do something
}
})

Answer 2

我不会使用id来存储该值，因为您正在将这些值写入DOM，并且所有id属性都必须是唯一的。使用类似data-id的辅助属性。

var imgArray = new Array();
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("data-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("data-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("data-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("data-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("data-id", "1");
const corp = document.getElementById('range_imgs');
// set margin
imgArray.forEach(
img => img.style.setProperty("margin-right", "15px")
);
// append all to document
imgArray.forEach(
img => corp.appendChild(img)
);
// hide/show functions
const hide = el => el.style.setProperty("display", "none");
const show = el => el.style.setProperty("display", "unset");
// get selected ID
const select = document.getElementById("allimgs");
const getSelectedId = () => select.options[select.selectedIndex].getAttribute("data-id");
// remove all images with non-selected IDs
const filterImages = () => document.querySelectorAll("#range_imgs > img").forEach(
child => getSelectedId() == child.getAttribute("data-id") 
? show(child)
: hide(child)
);
// run on pageload
window.addEventListener("load", filterImages);

<form>
<select id="allimgs" name="allimmages" onchange="filterImages(this)">
<option value="1et" data-id="1">img with id=1</option>
<option value="2et" data-id="2">img with id=2</option>
<option value="3et" data-id="3">img with id=3</option>
</select>
</form>
<div id="range_imgs">
</div>