Javascript选择嵌套的类元素

Question

我正在努力改变我网站上滑块的一些元素

我的滑块代码如下所示:

<div class="cl1">
    <h1>Some heading</h1>
    <div class="sl_descr">Some description</div>
    <div class="sl_price">from only €00.00<br></div>
</div>

<div class="cl2">
    <h1>Some other heading</h1>
    <div class="sl_descr">Some other description</div>
    <div class="sl_price">from only €00.00<br></div>
</div>

<div class="cl3">
    <h1>yet some heading</h1>
    <div class="sl_descr">yet Some description</div>
    <div class="sl_price">from only €00.00<br></div>
</div>

我想在货币变化时改变价格.要做到这一点,我想使用javascript与getElementsByClassName,然后使用innerHTML.但是我的javascript无法正常工作.这里是

document.getElementsByClassName('cl1 sl_price').innerHTML="from only £00.00<br>";

有关如何为每个"cl"元素分别处理"sl_price"类的任何建议？干杯

Answer 1

你目前的尝试有两个问题;

1. 您只能将单个类名传递给 getElementsByClassName
2. getElementsByClassName返回元素的集合(列表)(因此没有innerHTML属性)

您可以尝试document.querySelector(".cl1 .sl_price")(使用css选择器并返回第一个匹配)

更多信息,请访问https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelector

最终的结果将是这样的;

document.querySelector('.cl1 .sl_price').innerHTML = "from only £00.00<br>";

注意:我假设你只想匹配一个元素.如果没有,你应该看看@ Bommox的答案querySelectorAll.

Answer 2

document.querySelectorAll('.cl1 .sl_price');

这将选择cl1中所有嵌套的sl_price元素.如果你想修改更多的cl(即cl1,cl2,cl3),只需在它们中添加一个公共类,例如cl.