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

我有一个范围输入，我想调整输入时改变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不是函数”。我在编码方面还很新，任何帮助表示赞赏。

来源

2014-09-23 David

如果你不想让选举人发起攻击，你可能需要改变标题。 – 2014-09-23 23:02:19

好点谢谢！ – David 2014-09-23 23:06:06

请注意，将'h4'放在'span'内是无效的。 – Oriol 2014-09-23 23:11:17

find是一个jQuery方法。在香草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;

来源

2014-09-23 23:07:10 Oriol

使用jQuery“少写，多做”你可以用最接近（）来获取特定的父亲eleemnt之一并稍后查找（）以获得特定的即时元素

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

来源

2014-09-23 23:24:03 David

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

回答

相关问题