用JavaScript編寫此jQuery click函數

Question

我正在慢慢地從jQuery過渡到香草JS，但是我想用JavaScript編寫以下內容而感到掙扎，是否需要為每個元素設置一個“ for”循環？ 如何將子元素和ID定位？

這是我想了解的內容：

$('#id li').click(function(){
    $(this).addClass('active');
});

我了解文檔getElementById可以抓取“ #id”，但是如何獲得子元素<li>？ 我將如何使“ onclick”功能對任何單擊的列表元素起作用？ 我是否必須為每個元素設置一個“ for”循環？ 任何幫助，不勝感激！

Answer 1

這是一個JSFiddle，可以滿足您的需求：
http://jsfiddle.net/digitalzebra/ZMXGC/10/

(function() {
    var wrapper = document.getElementById("id");
    var clickFunc = function(event) {
        var target = event.originalTarget || event.target;

        target.className = "active";
    };

    wrapper.addEventListener("click",clickFunc);
})();

有一點解釋是為了...

首先，我使用一個自執行函數使用getElementById()獲取包裝div。 這等效於在jQuery中使用id選擇器： $('#id')

接下來，我將使用addEventListener()函數將click處理程序附加到元素，並傳遞click事件類型。

這將單擊處理程序函數綁定到div元素，與jQuery的click()相同。 我正在使用一種稱為事件冒泡的事件，其中包裝器的任何子級上的click事件將調用附加到包裝器的點擊處理程序。

用戶單擊元素后，將調用我們的函數。 originalTarget或target是用戶實際單擊的元素， 在這種情況下，始終為li 。 然后，我將該元素上的類設置為active。

Answer 2

這是上述問題的示例http://jsfiddle.net/G3ADG/2/

    (function() {
    var id = document.getElementById("id");
    var liele = id.getElementsByTagName("li");
    for (var i = 0; i < liele.length; i++) {
        liele[i].addEventListener("click", function () {
            this.className = "active";
        })

    }
})();

好吧，我真的很喜歡Polaris878解決方案，因為他沒有在其中使用任何循環。 在我的解決方案中，首先使用document.getElementById獲取HTML節點信息，這與$（“＃id”）類似。 比在下一步中，我要獲取所有屬於“ id”子代的“ li”標記類型，而不是在此li標記數組上添加事件偵聽器以偵聽單擊功能

className是允許在該Node上添加類的屬性之一

我已經在mozilla和chrome中測試了以上代碼

Answer 3

這將起作用（IE> = 10），不想搜索I​​E <10的classList.add（）替換，

var elems = document.querySelectorAll('#id li');
for (var i = 0; i < elems.length; i++) {
    var elem=elems[i];
    elem.addEventListener("click", function (e) {

        this.classList.add('active');
    });
}

小提琴