通过过滤器创建随机图像库

Question

我有点被困在我试图创建的东西上。我对javascript很陌生。我有一个基于列表的随机图像库脚本，该脚本本身工作正常，但我有两个问题。

1. 由于某种原因，将脚本放在函数中会阻止它使用 css......
2. 我正在尝试添加一个附加功能，将图像过滤到特定类别，但我不确定执行此操作的最佳方法。

如果我让函数通过 innerHTML 显示图像库，它会像它应该的那样应用 css(我通过这个以某种方式调整了它们的大小(，但它一次只会列出一个图像 - 我希望它以随机顺序显示与标签/标签相关的所有图像(但仅限于那些特定的图像(

我的列表目前是这样设置的(不确定这是否是此类功能的最佳方法(

var contents=new Array()
contents[0]='<a href="><img class="cdimg" src=""></a>'
contents[1]='<a href="><img class="cdimg" src=""></a>'
contents[2]='<a href="><img class="cdimg" src=""></a>'
contents[3]='<a href="><img class="cdimg" src=""></a>'

该类仅用于通过CSS设置样式，显然每个列表项中都包含所需的链接

Javascript：

var i=0
var random
//while all of array elements haven't been cycled thru
while (i<contents.length){
//generate random num between 0 and arraylength-1
random=Math.floor(Math.random()*contents.length)
//if element hasn't been marked as "selected"
if (contents[random]!="selected"){
document.write(contents[random])
//mark element as selected
contents[random]="selected"
i++
}
}

该脚本基于我在网上找到的示例，因此我可以创建自己的版本，更好地满足我的需求。

然后，我将上面的javascript放入一个名为

function displayAll()

以及运行该功能的按钮

<button onclick=displayAll()>All</button>

尽管CSS不适用，但这确实有效。图像太大，缺少边框(cdimg 的样式宽度为 355.56px，高度为 200px，纯白色边框为 2px(

我真正陷入困境的地方是有额外的按钮来过滤图像。我试图做这样的事情？

contents[0]='<a href="><img filter="nature" class="cdimg" src=""></a>'

我希望能够向图像添加类似 filter=" 的东西，并运行一个仅显示这些图像的函数，但如果可能的话，也可以以随机顺序显示。

<button onclick="displayFilter(nature)">Nature</button>
<button onclick="displayFilter(city)">City</button>

等。 如果有一个非常简单的解决方案，或者我什至错过了一个确切的例子，我深表歉意，但我已经摆弄了几个小时并搜索并且还没有真正找到我正在寻找的东西，所以我感谢您对我的菜鸟问题的耐心等待。

我将我的项目粘贴到编辑器中，您可以直接查看 https://www.w3schools.com/code/tryit.asp?filename=G7LTRO0WYG97(此版本暂时没有将图像库实现到div 中，因为它一次只显示一个图像，因此 document.write 会覆盖按钮(

再次感谢，对不起长度

Answer 1

问题是您正在使用document.write方法。write(( 方法主要用于测试：如果在 HTML 文档完全加载后使用它，它将删除所有现有的 HTML。
请参阅此处： HTML DOM Write(( 方法
因此，当您单击按钮时，style元素将被删除。
与其document.write不如尝试使用document.body.appendChild方法：

function displayAll(){
//while all of array elements haven't been cycled thru
while (i<contents.length){
//generate random num between 0 and arraylength-1
var random=Math.floor(Math.random()*contents.length);
//if element hasn't been marked as "selected"
if (contents[random]!="selected"){
var temp = document.createElement("SPAN");
temp.innerHTML = contents[random];
document.body.appendChild(temp);
//mark element as selected
contents[random]="selected";
i++;
}
}
}

代码的修改版本：https://www.w3schools.com/code/tryit.asp?filename=G7LTXNMB36HA

Answer 2

既然你正在尝试学习，我的第一个建议是不要使用document.write.(这就是"document.write覆盖按钮"的原因。

<div id="parent"></div>

请改用getElementById父元素。

var parent = getElementById("parent");

，然后使用appendChild功能添加内容。

parent.appendChild(content); 

请参阅此示例。如果您再次遇到困难，请创建一个新问题。