仅为使用 JavaScript 在父级中单击的子级更改类答案

【问题标题】：Change classes only for the child clicked within the parent using JavaScript仅为使用 JavaScript 在父级中单击的子级更改类
【发布时间】：2019-12-02 12:48:30
【问题描述】：

我在一个父 div 中有两个 div。我需要更改我单击的子 div 的类。为此，我正在编写一种方法来检查单击了哪个孩子，并分别尝试隐藏另一个孩子 div。但我无法添加类或删除类，因为索引始终显示为未定义。我感觉 return 语句有问题。

function changeClass() {

    const list = document.getElementById('my_div').children;
    const indx = this.getIndexOfParent(list);

      for (let i = 0; i < list.length; i++) {
        if (indx === 0) {
          list[indx + 1].classList.add("d-none d-sm-block");
          list[indx].classList.remove("col-6 d-none d-sm-block");
        } else if (indx === 1) {
          list[indx - 1].classList.add("d-none d-sm-block");
          list[indx].classList.remove("col-6 d-none d-sm-block");
        }
        list[indx].classList.add("d-xs-block");
      }
      
  }

  function getIndexOfParent(child_list) {
    for (var i = 0, len = child_list.length; i < len; i++) {
      ((index) => {
        child_list[i].onclick = () => {
          return index;
        };
      })(i);
    }
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.row > div {
  border: solid 1px black;
  padding: 10px;
}

<div class="container">
  <div class="row">
    <div  onclick="changeClass()" class="col-md-6 col-6">
     child-div-1
    </div>
    <div  onclick="changeClass()" class="col-md-6 col-6">
       child-div-2  
    </div>
  </div>
</div>

我想要的是，当我点击 child-div-1 时，它应该隐藏 child-div-2，反之亦然仅适用于小屏幕（这就是我使用 col 处理它的原因-6 和 d-xs-block 类）谁能帮我解决以下问题。

【问题讨论】：

一开始这没什么意义……每次调用 changeClass 时，您都在为所有这些元素添加一个新的附加点击处理程序。
如果您通过 HTML 属性使用那种老式的事件处理程序绑定，onclick="changeClass()" - 那么您最好将标识符或索引传递给那里的函数，onclick="changeClass(0)"，并且用它来确定你需要做什么。
实际上有一个按钮单击，我需要处理这些，但现在我需要更改这些类。你能告诉我正确的做法吗？
子组件是使用角度动态注入的，这就是为什么我无法在事件中传递值

标签： javascript css twitter-bootstrap typescript

【解决方案1】：

您在for loop 中添加了onclick。而是将类添加到单击的 child div 并从其兄弟 div 中删除该类。

document.querySelectorAll('div.row > div')
  .forEach((div) => {
    div.addEventListener('click', function({
      target
    }) {
      target.classList.add('d-none', 'd-sm-block');
      const sibDiv = Array.prototype.filter.call(target.parentNode.children, div => div != target)[0];
      sibDiv.classList.remove('col-6', 'd-none', 'd-sm-block');
    });
  });

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.row>div {
  border: solid 1px black;
  padding: 10px;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 col-6">
      child-div-1
    </div>
    <div class="col-md-6 col-6">
      child-div-2
    </div>
  </div>
</div>

-- 编辑--

return语句会将index的值返回给callback函数，你还需要在回调函数中加上return，所以回调函数得到的任何结果都会返回给getIndexOfParent函数。

function getIndex() {
    let i = 0;
    ((index) => {          // No return, logs undefined
        return index;
    })(i);
}
console.log(getIndex());

function getIndex() {
    let i = 0;
    return ((index) => { // with return
        return index;
    })(i);
}
console.log(getIndex());

【讨论】：

干得好:) 我明白了，但是为什么当我把它放在循环中时我的 return 语句不起作用
@Onera - 见编辑，在 for 循环中你有回调函数和 return 语句返回值到回调函数。为了将回调函数输出返回到函数getIndexOfParent，在它前面加上return statement。我：e return ((index) => {
你能解释一下吗，Array.prototype.filter.call(target.parentNode.children, div => div != target)[0];我是编程新手，很难理解这一点。
children return HTMLCollection，这不是一个常规数组，过滤器对常规数组起作用。所以，Array.prototype.filter 被使用。这里使用filter的主要目的是获取兄弟元素。 filter中的第一个参数是HTMLCollection，第二个是回调函数，它将数组中的每个元素作为参数，div => div != target检查div是否不等于点击的element，如果是则返回div else惯于。 filter 返回数组，所以要得到过滤后的元素使用[0]。
感谢朋友的支持:)

【解决方案2】：

我做了一支笔来解决这个问题。 Check the pen here

解决方法很简单，你只需要写这行

e.stopPropagation();

这将阻止事件在父 div 上触发

基本上您所描述的称为事件冒泡。你可以在medium了解更多信息

【讨论】：