Question

我尝试以不同的方式将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');
        }
    }
}

Answer 1

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

您可以使用 change 事件，并且需要根据情况将 = 替换为 == 或完全删除运算符（如果已选中）布尔值：

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>

用classList删除一个类

1 个答案: