Onclick將類添加到第二個子div || 使用Javascript

Question

我試圖將“ on”類添加到第二個孩子，但是我的代碼似乎不起作用。 可能嗎？ 還是有可能嗎？

我是一個菜鳥，在提出這個問題之前已經嘗試了多個論壇和教程。

HTML

<!--PARENT-->
<div class="element" id="elem1" onclick="addClass()">

  <!--FIRST CHILD-->
  <div>
  </div>

  <!--SECOND CHILD-->
  <div>
  </div>

</div>

<!--PARENT-->
<div class="element" id="elem2" onclick="addClass()">

  <!--FIRST CHILD-->
  <div>
  </div>

  <!--SECOND CHILD-->
  <div>
  </div>

</div>

<!--PARENT-->
<div class="element" id="elem3" onclick="addClass()">

  <!--FIRST CHILD-->
  <div>
  </div>

  <!--SECOND CHILD-->
  <div>
  </div>

</div>

CSS

element{
display:none;
}

on{
display:initial;
}

使用Javascript

function addClass(){
  var element= document.getElementsByClassName("element").children;


  element[1].classList.add('on');
  element[1].value ="on";
}

CODEPEN：

http://codepen.io/salman15/pen/woaQQW?editors=1010

Answer 1

您可以使用類似的方法，獲取所有元素，將“ on”類添加到每個元素的第二個子元素中

var element= document.querySelectorAll(".element");
for(var i=0; i < element.length; i++){

    element[i].children[1].classList.add('on');
    element[i].children[1].value ="on";   

}

Answer 2

此代碼段具有兩個功能：

turnOn() 函數分解：

這是一個注冊到根元素<html>上的click事件的事件處理程序，是的，這就是DOM的全部。 （ document.documentElement ）。
獲取對event.target引用並收集所有第二event.target （ document.querySelectorAll('div div + div'); ）
選擇器細分：獲取作為div的后代（ div div ）且具有同級div div位於其之前（或如果位於標記上方，則位於其上方）。 我稱他們為哥哥（ div + div ）。
現在遍歷第二個div的集合，並在每次迭代.e.target與第二個div進行比較以查看它們是否相同。 （ if (tgt === sec) { ）
找到匹配項后，添加on類。

turnOnAll() 函數：

這做同樣的事情，因為它的堂兄turnOn()的不同之處在於它是event.target是一個按鈕（ALL位於頂部），它會一下子改變第二的div。

有一些有趣的CSS屬性正在使用中，有關詳細信息，請參見CSS。 注意： event.target是第二個div，而不是單擊父對象，如果您仍然希望event.target仍然是父對象，請告訴我。即使在這種情況下不是很明顯，以這種方式制作事件監聽器也可以讓您使用純JavaScript（jQuery .on()委派事件，除非我不確定它是否可以處理動態創建的元素.on() ）。 通過委派事件，您可以在父元素上注冊事件，並能夠確定單擊了哪個子元素。 那只是使用一個 eventListener 。

片段

 function turnOnAll() { var second = document.querySelectorAll('div div + div'); var qty = second.length; for (let i = 0; i < qty; i++) { second[i].classList.add('on'); } } document.documentElement.addEventListener('click', turnOn, false); function turnOn(e) { var tgt = e.target; var second = document.querySelectorAll('div div + div'); var qty = second.length; for (let i = 0; i < qty; i++) { var sec = second[i]; if (tgt === sec) { sec.classList.add('on'); } } }

 div { height: 35px; margin: 10px auto; cursor: pointer; } div:before { content: attr(class); color: gold; font-size: 20px; } div.element { background: rgba(0, 0, 0, .5); height: 180px; color: white; } div.element:after { content: 'Parent-Pure CSS: Each div has a :before, content: attr(class) property which will display the class if any.'; } div div:first-of-type:after { content: 'First Child-Pure CSS: :after, content, and desendant and first-of-type'; border: 2px dashed cyan; color: cyan; } div div + div:after { content: 'Second Child-Pure CSS: :after, content, and desendant and sibling selector'; border: 2px dashed red; color: red; } .as-console-wrapper { height: 80%; background: rgba(0, 0, 0, .7); } button { width: 50px; height: 25px; }

 <button onclick='turnOnAll()'>ALL</button> <!--PARENT--> <div class="element" id="elem1"> <!--FIRST CHILD--> <div> </div> <!--SECOND CHILD--> <div> </div> </div> <!--PARENT--> <div class="element" id="elem2"> <!--FIRST CHILD--> <div> </div> <!--SECOND CHILD--> <div> </div> </div> <!--PARENT--> <div class="element" id="elem3"> <!--FIRST CHILD--> <div> </div> <!--SECOND CHILD--> <div> </div> </div>

Onclick將類添加到第二個子div || 使用Javascript

問題描述

2 個解決方案

解決方案1
1 2016-11-17 17:13:12

解決方案2
1 已采納 2016-11-17 19:07:12

片段

Onclick將類添加到第二個子div || 使用Javascript

問題描述

2 個解決方案

解決方案1 1 2016-11-17 17:13:12

解決方案2 1 已采納 2016-11-17 19:07:12

片段

解決方案1
1 2016-11-17 17:13:12

解決方案2
1 已采納 2016-11-17 19:07:12