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

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

您只能将单个类名传递给getElementsByClassName
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。

Answer 3

你应该这样做（如果不使用jQuery）：

我曾经使用过“for”因为如果它不是一个cl1或者sl_price就不是你了。

var nodes = document.getElementsByClassName("cl1");
for(var i = 0; i < nodes.length; i++) {
     var node = nodes[i].getElementsByClassName("sl_price");
     for(var j = 0; j < node.length; i++) {
          node.innerHTML="from only £00.00<br>";
     }
}

Answer 4

如果使用Jquery，则代码比本机Javascript短。

$('.cl1 .sl_price').html("from only £00.00<br>");

这是小提琴：

http://jsfiddle.net/4zLbmrLq/

Answer 5

编辑：这是错误的，因为它没有考虑到给出了两个类名。

我建议使用JQuery这样的东西，当你尝试做一些更复杂的事情时会更容易。但是，这里的实际问题是getElementsByClassName会返回HTMLCollection个元素，而在其上设置innerHTML并不会在其元素上设置它。以下代码应该有效：

var elements = document.getElementsByClassName('cl1 sl_price');
for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "from only £00.00<br>";
}

Answer 6

我相信你需要做的是这样的事情：

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

现在你正在做的方式将获得具有类cl1和sl_price的元素。如果你链接你的方法，你将告诉它在文档对象中查找cl1作为类的元素，返回具有该子集的对象，然后在sl_price类的元素中查找该子集。然后，您必须指定索引，因为document.getElementsByClassName将返回符合您要求的元素数组。该数组不具有属性array.innerHTML，但其索引中包含的对象将为。

Javascript选择嵌套的类元素

6 个答案: