Jquery -> vanilla javascript? - Stack Overflow

admin管理员组

文章数量:1287984

I am programmer who learning jQuery javascript but never really grasped vanilla javascript (i know I am a naughty programmer). My question is how would I go about replicating this functionality in vanilla JS?

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

I am programmer who learning jQuery javascript but never really grasped vanilla javascript (i know I am a naughty programmer). My question is how would I go about replicating this functionality in vanilla JS?

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

• javascript
• jquery

Share Improve this question Follow edited Jan 26, 2016 at 22:05 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Oct 2, 2012 at 14:40 UddersUdders 6,9862727 gold badges108108 silver badges207207 bronze badges 13

• 5 One thing you should do is look at the jQuery source code to see exactly what the methods do ($, change, val, parent, find and show here). – rgthree Commented Oct 2, 2012 at 14:42
• 2 Wow scary to think people go straight into jQuery without doing the basics :-o more work for the people that will know how to fix things ;-) – Alex Gill Commented Oct 2, 2012 at 14:47
• 1 @ThomBlake: Sophisticated querying? It's selecting by tag and class. A person should need more than simple DOM selection to motivate them to use a large library like jQuery. – I Hate Lazy Commented Oct 2, 2012 at 14:53
• 2 @ianpgall: That's a silly parison. The native DOM API is very high-level and well within the capability of most people. Sadly, that's a typical jQuery mentality. – I Hate Lazy Commented Oct 2, 2012 at 14:56
• 2 @jwatts1980: Driving a car pared to building a car is hardly analogous. It's more like driving a car pared to driving a car that may be a little less fortable at first. – I Hate Lazy Commented Oct 2, 2012 at 15:06

 |  Show 8 more ments

2 Answers 2

Sorted by: Reset to default 6

This site might help !

But here's a step by step conversion:

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

$('select') - use document.getElementsByTagName, then loop over the returned list

.change(function() {…} - check out advanced event registration model for browser differences

$(this).val() - simply this.value; you should use this even in jQuery

$(this).parent().parent() - get the parentNode of the element (two times)

.find("input.hidden") - this is a bit harder. You could use .querySelector[All], but that does not work in legacy browsers. jQuery adds lots of sugar with its cross-browser selector engine. You might use another way to get the input element(s) that works cross-browser; you might try something along javascript document.getElementsByClassName patibility with IE.

.show() - just remove the display:none; via el.style.display = "";. Btw, you might just want to remove the hidden class instead of overwriting it with an inline style :-)

Real vanilla for W3-pliant browsers:

[].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);
});

This should work in older browsers, too:

(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 vanilla javascriptStack Overflow