时间戳

首页 > 解决方案 > 用 classList remove 删除一个类

javascript - 用 classList remove 删除一个类

问题描述

我尝试以不同的方式 classList remove 删除一个类，但什么也没有。我还阅读了一个已在此处发布的主题，但似乎并不完全相同。

你知道我哪里错了吗？

<div class="block_AddElement_Categories">
    {% for key, categorie in categories %}
          <input onchange="depliantCat('{{key}}');" value="{{key}}" id="{{key}}" name="categorie" type="radio">
          <label for="{{key}}">{{key}}</label>
            {% for children in categorie  if children is defined %}
                  <div class="reveal-if-active {{key}}">
                      <input class="catEnfantActive" id="{{children}}" value="{{children}}" name="categorie" type="radio">
                      <label class="catEnfantActive" for="{{children}}">{{children}}</label>
                  </div>
            {% endfor %}
   {% endfor %}
</div>

我在两个级别上有一个单选列表，当父母点击时我尝试添加一个类，它显示了子列表。

该代码可以使子列表出现但不会关闭它，因为它仍然没有删除我添加的类。

function depliantCat(nom) {

    sousCategorie = document.querySelectorAll('.' + nom);

    if (document.getElementById(nom).checked = true) {
        for(var i = 0; i < sousCategorie.length; i++) {
            sousCategorie[i].classList.add('catParentActiveChecked');
        }
    }

    else if (document.getElementById(nom).checked = false) {
        for(var i = 0; i < sousCategorie.length; i++) {
            sousCategorie[i].classList.remove('catParentActiveChecked');
        }
    }
}

标签： javascriptlistclass

解决方案

<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>
<div class="bar">4</div>
<div class="bar">5</div>
<input type="checkbox" id="foo" onchange="depliantCat(this)" />Foo<br>
<input type="checkbox" id="bar" onchange="depliantCat(this)" />Bar
<style>
    .catParentActiveChecked {
        color:red;
    } 
</style>
<script>
    function depliantCat(el) {
            var nom = el.id;
            sousCategorie = document.querySelectorAll('.' + nom);
            if (el.checked) {
                for(var i = 0; i < sousCategorie.length; i++) {
                    sousCategorie[i].classList.add('catParentActiveChecked');
                }
             }
            else {
                for(var i = 0; i < sousCategorie.length; i++) {
                    sousCategorie[i].classList.remove('catParentActiveChecked');
                }
              }
         }
</script>

您可以使用更改事件，如果选中的是布尔值，则需要在条件中将=替换为==或完全删除运算符：

if( checked == true )

是相同的

if( checked )

和

if( checked == false )

是相同的 

if( !checked )

见https://www.w3schools.com/jsref/jsref_operators.asp

=是赋值运算符，而==是比较运算符

我不知道您的代码是如何组织的，但您可以使用较短的版本：

function depliantCat(el) {
            sousCategorie = document.querySelectorAll('.' + el.id);
            for(var i = 0; i < sousCategorie.length; i++) {
                    sousCategorie[i].classList.toggle('catParentActiveChecked');
            }
         }

使用 jQuery 会是这样的

<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>
<div class="bar">4</div>
<div class="bar">5</div>
<input type="checkbox" id="foo" class="souschanger" />Foo<br>
<input type="checkbox" id="bar" class="souschanger" />Bar

<style>
    .catParentActiveChecked {
        color:red;
    } 
</style>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
    $(function(){
       $(".souschanger").change(function() {
           $("."+this.id).toggleClass('catParentActiveChecked');
       });
    });
</script>

推荐阅读