这个Javascript可以被重写以用于类而不是id吗？

我有一个系统，我试图获得图像点击改变下拉菜单的选择。你点击蓝色的图片，投溺水读“蓝色”，等等。我找到了一个脚本（虽然我相信它有点旧）来做这件事。但是，它只适用于ID。我无法为我的选择分配ID，因为它是Wordpress插件的一部分。那么，有没有办法通过使用一个类（每页只有一个类，因此不会出现多个ID）或“name”属性来修改这个Javascript

以下是我正在使用的代码：

函数选择ADROPDONITEM（id，val）{
var d=document.getElementById（id）；
对于（变量i=0；i

完成
没有一个
0109奶油
0209蜂蜜
0309核桃
0409香料
0509英国栗
0609坚果木
0709樱桃木
0809桃花心木
0909咖啡
1009帝国
1109黑巧克力
1209黑色
1309轻橡木
1409橡树
1612蒙大拿胡桃
1712新时代橡树
1812丰山梨
1912年莫霍加尼
2012年肯辛顿枫树酒店
2112太阳橡树
0102金黄色素
0103钢琴键白色
0104胭脂红
0106扎弗尔蓝
0107茶玫瑰橙
0108螳螂绿

您可以使用ES6执行类似的操作。“全部赋值”选择一个类，使用“扩展”操作符将其转换为实际数组。使用

forEach

对其进行循环，并为所有选择选项添加一个eventlistener。完成！不要忘记删除所有内联单击函数

---

添加了简单的JSFIDLE以可视化。

GetElementsByCassName

返回元素的集合，而不是单个元素。 因此，您必须循环该集合

for (var d of ds) {
  // ...
}

函数SelectADropdownItem（类名，val）{
var ds=document.getElementsByClassName（className）；
for（ds的变量d）{
对于（变量i=0；i

完成
没有一个
0109奶油
0209蜂蜜
0309核桃
0409香料
0509英国栗
0609坚果木
0709樱桃木
0809桃花心木
0909咖啡
1009帝国
1109黑巧克力
1209黑色
1309轻橡木
1409橡树
1612蒙大拿胡桃
1712新时代橡树
1812丰山梨
1912年莫霍加尼
2012年肯辛顿枫树酒店
2112太阳橡树
0102金黄色素
0103钢琴键白色
0104胭脂红
0106扎弗尔蓝
0107茶玫瑰橙
0108螳螂绿

您的问题与设置id无关。这是您正在选择和循环的内容。您正在选择“选择”元素。然后在select元素上循环，就像它是多个对象一样。由于某种原因，你认为你在循环选择，你不是

function SelectADropdownItem(id, val) {
  var d = document.getElementById(id);  <-- select element
  for (var i = 0; i < d.length; i++) { <-- looping over select, not its options

---

将id分配给“文档准备就绪”下拉列表

document.addEventListener('DOMContentLoaded', function(){
    document.getElementsByClassName("finishes-dropdown")[0].id = "design-dropdown";
});

---

页面上有多少个选项？页面上是否有唯一的元素，我们可以识别，然后根据其他元素找到选择？代码没有意义，因为您正在查看

var d=document.getElementById（id）；对于…

，它不是数组。您的代码在小提琴中运行良好。问题在于加载JS的时间。将fiddle设置为在头部或身体中加载js（而不是在

load

上），您将看到：示例在这里工作，因为id仍然在那里。问题是OP无法添加id，因为它来自插件。因此，我们要么添加代码以正确添加id，要么以其他方式选择

。因此，我问我们可以使用哪些元素来访问

，因为我不知道插件的哪些部分是，哪些部分不是。我无法让它在我这方面起作用。请记住，select在我的一端没有ID，因此我不能将其用作一个因素。我也只有一个选择每页。对不起，我可能读错了什么。但是非常感谢你的帮助。我没有在任何地方使用身份证。请阅读代码并尝试理解它的作用。不要只是复制和粘贴。为了澄清，我删除了id和多余的选择。这不会更改JS代码。@请先尝试第一个示例。第二个是高级JS代码非常感谢。对不起，我绝对不是高级。这很有道理，再次感谢！没有必要道歉。我们总有一天会成为noob。我认为这可能是最好的选择，因为它可以从内联图像html代码中删除大量内容。然而，我无法想象如何使用它。JS Fiddles亲自帮助我，但我不想让你代表我做更多的工作。谢谢你的帮助！Thnx！为您添加了一把简单的小提琴。非常感谢！（试图投票，但因为我是新来的，所以这里没有显示，对不起）@Amber没问题，你可以接受答案。甚至比向上投票更好；）。祝你好运

function SelectADropdownItem (id, val) {
  var mySelect = document.getElementById(id);
  mySelect.value = value;
}

document.addEventListener('DOMContentLoaded', function(){
    document.getElementsByClassName("finishes-dropdown")[0].id = "design-dropdown";
});