3

私はプログラマーであり、jQuery JavaScript を学んでいますが、バニラ JavaScript を実際に把握したことはありません (私がいたずらなプログラマであることはわかっています)。私の質問は、バニラ 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要素の取得 (2 回)

.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 = "";
    }
});
于 2012-10-02T14:50:01.247 に答える