Question

我正在尝试在出勤清单项目中设置正确的操作。我的意思是大约两个带有类检查按钮和时间按钮的按钮（带有X图标的按钮）。

当我单击（例如在复选按钮上）时，它应该以这种方式工作，然后将在此按钮上设置“ selected”类。在下一步中，如果我单击“时间”按钮，则应自行取消选中“检查”按钮，并且应在“时间”按钮上设置“选择”类，反之亦然。

为了演示我的概念，我创建了两个具有完整机制的简单按钮。

let checkBtn = null;
let timesBtn = null;
checkBtn = document.querySelector('.check-btn');
timesBtn = document.querySelector('.times-btn');

checkBtn.addEventListener('click', function(){
    if(this.classList.contains('selected')===true){
        this.classList.remove('selected');
        if(timesBtn.classList.contains('selected')===false){
            timesBtn.classList.add('selected');
        }
    }
    else if(this.classList.contains('selected')===false){
        this.classList.add('selected');
        if(timesBtn.classList.contains('selected')===true){
            timesBtn.classList.remove('selected');
        }
    }
});

timesBtn.addEventListener('click', function(){
    if(this.classList.contains('selected')===true){
        this.classList.remove('selected');
        if(checkBtn.classList.contains('selected')===false){
            checkBtn.classList.add('selected');
        }
    }
    else if(this.classList.contains('selected')===false){
        this.classList.add('selected');
        if(checkBtn.classList.contains('selected')===true){
            checkBtn.classList.remove('selected'); 
        }
    }
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .check-btn.selected{
            background-color: red;
        }
        .times-btn.selected{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="container-buttos">
            <button class="check-btn">click 1</button>
            <button class="times-btn">click 2</button>
        </div>
    </div>
</body>
<script src="main.js"></script>
</html>

在出席者列表中，我编写了几乎类似的算法，但带有DOM元素

 containerPerson.addEventListener('click', function(e){
    //check button
    if(e.target.closest('.check-button') !== null){ 
        if(e.target.closest('.check-button').classList.contains('selected')===true){ //start
            e.target.closest('.check-button').classList.remove('selected');
            e.target.closest('.check-button').childNodes[0].classList.remove('selected');
            if(e.target.closest('.times-button') !== null){
                if((e.target.closest('.times-button').classList.contains('selected')===false)){
                    e.target.closest('.times-button').classList.add('selected');
                    e.target.closest('.times-button ').childNodes[0].classList.add('selected');
                }
            } 
        }
    }

    if(e.target.closest('.check-button') !== null){ 
        if(e.target.closest('.check-button').classList.contains('selected')===false){ //start
            e.target.closest('.check-button').classList.add('selected');
            e.target.closest('.check-button').childNodes[0].classList.add('selected');
            if(e.target.closest('.times-button') !== null){
                if((e.target.closest('.times-button').classList.contains('selected')===true)){
                    e.target.closest('.times-button').classList.remove('selected');
                    e.target.closest('.times-button ').childNodes[0].classList.remove('selected');
                }
            }
        }
    }

    //X button
   if(e.target.closest('.times-button') !== null){ 
        if(e.target.closest('.times-button').classList.contains('selected')===true){ //start
            e.target.closest('.times-button').classList.remove('selected');
            e.target.closest('.times-button').childNodes[0].classList.remove('selected');
            if(e.target.closest('.check-button') !== null){
                if((e.target.closest('.check-button').classList.contains('selected')===false)){
                    e.target.closest('.check-button').classList.add('selected');
                    e.target.closest('.check-button').childNodes[0].classList.add('selected');
                }
            }
        }
    }
    if(e.target.closest('.times-button') !== null){ //if you haven't "e.target.closest('.times-button') !== null" then will show error: "cannot read property classList of null"
        if(e.target.closest('.times-button').classList.contains('selected')===false){ //start
            e.target.closest('.times-button').classList.add('selected');
            e.target.closest('.times-button').childNodes[0].classList.add('selected');
            if(e.target.closest('.check-button') !== null){
                if((e.target.closest('.check-button').classList.contains('selected')===true)){
                    e.target.closest('.check-button').classList.remove('selected');
                    e.target.closest('.check-button').childNodes[0].classList.remove('selected');
                }
            }
        }
    }
});

and in this photo are the results

我不知道如何解决这个问题。也许这个问题是由文档中动态生成的大量嵌套元素引起的？也许有人知道解决这个问题的更好方法？

Link to the entire project

Answer 1

我将您单独的if块组合为if / else块。我认为这解决了一些与您的问题分开的小问题。

我看到的这个问题是您的内部检查 if(e.target.closest('/* OTHER BUTTON'S CLASS */') !== null)

这实际上是不可能的。在简化的演示示例中，代码有效，因为您找到了相应类的所有按钮，并从中删除了类。这显然在您的项目中不起作用，因为每一行应仅影响该行中的按钮（我认为）。您正在尝试查找单击的按钮的同级对象。因此，我们可以在单击按钮的父级上使用一些querySelector调用来查找同级并删除该类。

containerPerson.addEventListener('click', function(e){
        //check button
        if(e.target.closest('.check-button') !== null) { 
            e.target.closest('.check-button').classList.toggle('selected');
            e.target.closest('.check-button').childNodes[0].classList.toggle('selected');
            let sibs = e.target.closest('.check-button').parentNode.querySelector('.times-button');
            if(sibs !== null){
                if(sibs.classList.contains('selected')){
                  sibs.classList.remove('selected');
                  sibs.childNodes[0].classList.remove('selected');
                } else {
                  //sibs.classList.add('selected');
                  //sibs.childNodes[0].classList.add('selected');
                }
            }
        } else if (e.target.closest('.times-button') !== null) { 
            e.target.closest('.times-button').classList.toggle('selected');
            e.target.closest('.times-button').childNodes[0].classList.toggle('selected');
            let sibs = e.target.closest('.times-button').parentNode.querySelector('.check-button');
            if(sibs !== null){
                if(sibs.classList.contains('selected')){
                  sibs.classList.remove('selected');
                  sibs.childNodes[0].classList.remove('selected');

                } else {
                  //sibs.classList.add('selected');
                  //sibs.childNodes[0].classList.add('selected');
                }
            }
        }
});

如何正确设置新生成的div中按钮的作用？

1 个答案: