时间戳

首页 > 解决方案 > 仅为使用 JavaScript 在父级中单击的子级更改类

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

问题描述

我在父 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 类处理它的原因）谁能帮我解决以下问题。

标签： javascriptcsstwitter-bootstraptypescript

解决方案

您已onclick在for loop. 而是将类添加到单击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函数，您还需要在回调函数中添加返回，因此回调函数得到的任何结果都会返回给函数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());

推荐阅读