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返回“Uncaught TypeError：undefined不是函数”。我还很擅长编码;任何帮助表示赞赏。

Answer 1

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

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

但是，这不会有效，因为span没有h，而你需要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＆＃34;少写，做更多＆＃34;你可以使用nearest（）来获取特定的父元素，然后使用find（）来快速获取特定的元素

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

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;
        } 
}

如何选择不同范围内的元素并且也是类元素？

2 个答案: