選擇兒童ByClassName的Javascript

我有很多喜歡的div在同一頁上以下渲染：選擇兒童ByClassName的Javascript

<div class="contentUser"> 
    <div class="innerContent"> 
     Some data 
    </div> 

    <div class="contentButtonWrap"> 
     Some buttons 
    </div> 
</div>

我需要觸發的「contentButtonWrap」當「contentUser單擊」樣式的變化。

我不知道如何選擇某個類名的子元素。請注意，「contentUser」中可呈現的元素數量從div（contentUser）更改爲div。但「ContentUser」中只有一個「contentButtonWrap」元素。

這是我有：

function avoidHover() { 
    var userDivs = document.getElementsByClassName('contentUser'); 
    [].forEach.call(userDivs, function(e){ 
     e.click = function(){ 

      var target = e.getElementsByClassName('contentButtonWrap'); 
      target[0].style.backgroundColor='green'; 
      }; 
    }); 
};

來源

2015-02-23 Al Ex Tsm

你有沒有考慮使用jQuery，這將是很容易與它 – 2015-02-23 20:33:29

沒有我想要的解決方案是純JavaScript – 2015-02-23 20:33:59

我想你想用'e.onclick'？順便說一句，更好地命名變量'el'，因爲'e'通常用於事件。 – Bergi 2015-02-23 20:34:48

這是我取它：http://jsfiddle.net/cdL51w2g/

function avoidHover() { 
    var userDivs = document.getElementsByClassName('contentUser'); 

    for(var i=0; i<userDivs.length; i++){ 
     userDivs[i].onclick = function(){ 
      var target = this.getElementsByClassName('contentButtonWrap'); 
      target[0].style.backgroundColor='green'; 
     }; 
    } 
};

我改變訪問孩子們在家長div的方式和使用的功能onclick代替click在問題中。

來源

2015-02-23 20:42:36

@Daniel Williams - 非常感謝。我有一個拼寫問題（點擊而不是onclick）我的方式和你的方式一樣。任何理由循環你的方式在我的？ – 2015-02-23 20:50:24

沒有特別的理由。我想更多的習慣.. – 2015-02-23 21:00:34

「onclick」而不是「click」。比較遺憾的是......

function avoidHover() { 
    var userDivs = document.getElementsByClassName('contentUser'); 
    [].forEach.call(userDivs, function(e){ 
     e.onclick = function(){ 

      var target = e.getElementsByClassName('contentButtonWrap'); 
      target[0].style.backgroundColor='green'; 
      }; 
    }); 
};

來源

2015-02-23 21:12:09

選擇兒童ByClassName的Javascript

回答

相關問題