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

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返回“未捕获的TypeError：未定义不是函数”。 我还是编码新手。 任何帮助表示赞赏。

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;

Answer 2

使用JQuery“少写，多做”，您可以使用closest（）获得特定的父元素，然后使用find（）获得特定的父元素

使用var内部函数防止定义或替换全局变量

function setCond(t) {
        var item=$(t);
        var tag = item.closest(".right-side").find(".h");
        switch(parseInt(item.val(),10)) {
                case 1: tag.text("Poor"); break;
                case 2: tag.text("Fair"); break;
                case 3: tag.text("Good"); break;
                case 4: tag.text("Excellent"); break;
        } 
}