Question

我是学习jQuery javascript的程序员，但从未真正掌握过vanilla javascript（我知道我是一个顽皮的程序员）。我的问题是如何在vanilla JS中复制这个功能？

$('select').change(function() {
    if($(this).val() == "Other (please specify)") {
        $(this).parent().parent().find("input.hidden").show();
    }
});

Answer 1

This site might help !

但这是一步一步的转换：

var selects = document.getElementsByTagName('select');
for (var i=0; i<selects.length; i++) {
   selects[i].onchange = function() {
    if( this.value == "Other (please specify)") {
        var elements = this.parentNode.parentNode.getElementsByTagName("input");
        for (var j=0; j<elements.length; j++) {
           if( !elements[j].className.match(/\bhidden\b/)) continue;
           elements[j].style.display = ''; // the exact thing to do here would depend on your previous actions 
        }
    }
   }
}

Answer 2

$('select') - 使用document.getElementsByTagName，然后循环返回列表

.change(function() {…} - 查看advanced event registration model浏览器差异

$(this).val() - 只是this.value;你甚至应该在jQuery中使用它

$(this).parent().parent() - 获取元素的parentNode（两次）

.find("input.hidden") - 这有点困难。您可以使用.querySelector [All]，但这在旧版浏览器中不起作用。 jQuery通过其跨浏览器选择器引擎添加了大量的糖。您可以使用另一种方式来获取跨浏览器工作的输入元素;你可以尝试一下javascript document.getElementsByClassName compatibility with IE。

.show() - 只需通过display:none;删除el.style.display = "";即可。顺便说一下，您可能只想remove hidden类，而不是用内联样式覆盖它： - ）

符合W3标准的浏览器的真正香草：

[].each.call(document.getElementsByTagName('select'), function(select) {
    select.addEventListener("change", function(e) {
        if (this.value == "Other (please specify)") {
            var inputs = this.parentNode.parentNode.querySelectorAll("input.hidden");
            for (var i=0; i<inputs.length; i++)
                inputs[i].classList.remove("hidden");
        }
    }, false);
});

这也适用于旧版浏览器：

(function(selects, handler) {
    if (document.addEventListener)
        for (var i=0; i<selects.length; i++)
            selects[i].addEventListener("change", handler, false);
    else
        for (var i=0; i<selects.length; i++)
            selects[i].attachEvent("onchange", handler);
})(document.getElementsByTagName('select'), function() {
    if (this.value == "Other (please specify)") {
        var inputs = this.parentNode.parentNode.getElementsByTagName("input");
        for (var i=0; i<inputs.length; i++)
            if (/\bhidden\b/.test(inputs[i].className))
                inputs[i].style.display = "";
    }
});

Jquery - ＆gt;香草javascript？

2 个答案: