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的引用并收集所有第二个孩子（document.querySelectorAll('div div + div');）
选择器细分：获取作为div的后代的div（div div）和有一个位于它之前（或位于它之上）的兄弟，如果看标记）。我称他们为兄弟（div + div）。
现在迭代第二个div的集合，并在每次迭代时，将.e.target与第二个div进行比较，看它们是否相同。（if (tgt === sec) {）
找到匹配项后，添加上课。

turnOnAll() 功能：

这与它的堂兄turnOn()的作用相同，不同之处在于event.target是一个按钮（ ALL 位于顶部）它会立即改变第二个div 。

有一些有趣的CSS属性正在使用中，详细信息在CSS中进行了评论。 注意： event.target是第二个div，而不是父母被点击，如果您希望event.target成为父母，请告诉我。即使在这种情况下不是很明显，以这种方式制作事件监听器允许您使用纯JavaScript委托事件（jQuery .on()，除了我不确定它是否可以处理动态创建的元素，如.on()）。通过委派一个事件，您可以在父元素上注册一个事件，并能够确定点击了哪个孩子。那只是使用一个 eventListener。

段

＆＃13;

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');
    }
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Onclick将类添加到第二个子div ||使用Javascript

2 个答案:

段