3

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

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

2 回答 2

6

这个网站可能会有所帮助！

但这里是一步一步的转换：

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 
        }
    }
   }
}
于 2012-10-02T14:43:50.910 回答
6

$('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;via 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 = "";
    }
});
于 2012-10-02T14:50:01.247 回答