Jquery - > vanilla javascript？

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

这个网站可能有帮助!

但这是一步一步的转换:

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() {…}- 查看浏览器差异的高级事件注册模型

$(this).val()- 简单地说this.value; 你应该在jQuery中使用它

$(this).parent().parent()- 得到parentNode元素(两次)

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

.show()- 只需删除display:none;通道el.style.display = "";.顺便说一句,你可能只是想删除的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 = "";
    }
});