javascript - 如何选择位于不同跨度且也是类元素的元素？

Question

我有一个范围输入，我希望 h4 标签在调整输入时发生变化。 (我会为该元素分配一个 id，但我在同一页面上有另一个集合，但我似乎无法让它作为一个类工作)。

这是我的 HTML:

<div class="right-side">
    <span> <h4>Sku:</h4> </span>
    <span> <input type="text" size=6 id="sku"/> </span>
    <span> <h4>Condition:</h4> </span>
    <span> <input name = "condInput" type="range" min="1" max="4" step="1" oninput="setCond(this)" onchange="setCond(this)"> </span>
    <span> <h4 class="cond">Good</h4> </span>
</div>

这是我的 JavaScript 函数:

function setCond(t) {
        cond = t.value;
        tag = t.parentNode.parentNode.find("span.h");
        console.log(tag);
        switch(parseInt(cond)) {
                case 1: tag.innerHTML = "Poor"; break;
                case 2: tag.innerHTML = "Fair"; break;
                case 3: tag.innerHTML = "Good"; break;
                case 4: tag.innerHTML = "Excellent"; break;
        } 
}

我尝试了一些不同的方法，但似乎无法让它发挥作用。 console.log 返回“未捕获的类型错误:未定义不是函数。”我对编码还很陌生；如有任何帮助，我们将不胜感激。

Answer 1

find 是一个 jQuery 方法。在 vanilla-js 中，你应该使用

var tag = t.parentNode.parentNode.querySelector("span.h");

但是，这也不起作用，因为没有 h 类的 span，而您需要一个 h4。

因此，请使用其中之一

var tag = t.parentNode.parentNode.getElementsByClassName("cond")[0];
var tag = t.parentNode.parentNode.getElementsByTagName("h4")[1];
var tag = t.parentNode.parentNode.querySelector("h4.cond");

您还可以考虑诸如此类的事情

var tag = t.parentElement.nextElementSibling.firstElementChild;