Question

背景：我为事件预订购买了这个WordPress插件。显然，作者在添加超过1张票或应用优惠券之后并不觉得有必要进行价格更新，所以我试图自己写一个快速而肮脏的解决方案。它收取的价格是正确的，但我认为人们应该在提交信用卡之前看到最终价格。您可以在此处看到此操作（只需尝试添加1张以上的票证）https://hellbentbbq.ca/events/ultimate-pork/

我的快速和肮脏的黑客方法是 1）注意选择更改的票证 2）注意优惠券代码是否成功

我从＃1开始并试图让以下工作：

`document.getElementsByClassName('em-ticket-select').onchange=function(){ updatePrice() };
console.log(document.getElementsByClassName('em-ticket-select'));

function updatePrice(){
        price=document.getElementById('theprice');
        alert(price);
}
`

我已经添加了console.log，所以我可以明白我选择的是什么，但由于某些原因我似乎无法选择html集合中的任何项目？

我以为我可以去：

document.getElementsByClassName（'em-ticket-select'）[0]并获取我想要的元素但显然不是 - 结果未定义。没有[0]这里是登录到控制台的内容：

HTMLCollection[0]
0
:
select#em-ticket-spaces-5.em-ticket-select
em-ticket-spaces-5
:
select#em-ticket-spaces-5.em-ticket-select
em_tickets[5][spaces]
:
select#em-ticket-spaces-5.em-ticket-select
length
:
1
onchange
:
()
__proto__
:
HTMLCollection

感谢我出错的方向。

我意识到如果我可以通过ID选择元素会更容易，但ID是动态生成的，我真的只是想在JS上快速弄脏它来解决这个问题，而不是重写或试图找出什么其他人在他们的代码中做了。

Answer 1

要在数组上附加一个事件侦听器，就像通过getElementsByClassName返回的对象一样，循环遍历它们并将侦听器附加到每个侦听器。

＆＃13;

var selects = document.getElementsByClassName('em-ticket-select');
function updatePrice(el) {
  console.log(el.value);
}
for (var i = 0; i < selects.length; i++) {
  selects[i].addEventListener('change',function() {
    updatePrice(this);
  });
}

＆＃13;

<select class="em-ticket-select">
  <option>foo</option>
  <option>bar</option>
</select>

<select class="em-ticket-select">
  <option>foo</option>
  <option>bar</option>
</select>

<select class="em-ticket-select">
  <option>foo</option>
  <option>bar</option>
</select>

＆＃13;

javascript getelementsByClassName - undefined []

1 个答案: