javascript - 通过过滤器创建随机图片库

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.56 像素，高度为 200 像素，纯白色边框为 2 像素)

我真正被卡住的地方是有额外的按钮来过滤图像。我正在尝试做这样的事情？

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() Method
因此，当您单击按钮时，style 元素将被移除。
尝试使用 document.body.appendChild 方法代替 document.write:

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