Question

我正在尝试创建一个菜单，其中每个元素都有其自己的复选框。在选择排序按钮时（现在这里是一个复选框），该菜单应该只显示那些已经激活了复选框的元素（通过手动单击元素的复选框并使其保持活动状态来完成）

这是我的HTML代码

    <input type= "checkbox" class="toggler" id="clicked" onclick="tclick()" >click here to sort 

  <p><input type="checkbox"  id="inactive" onClick="but_clicked()">Hello1</p>
<p><input type="checkbox"  id="inactive" onClick="but_clicked()">Hello2</p>
<p><input type="checkbox"  id="inactive" onClick="but_clicked()">Hello3</p>

这是我的Jquery

 function but_clicked(){
       // alert("Hello, checkbox clicked");
       if(this.id=="active"){
                this.id="inactive";
        console.log(this.id);}
        else{
            this.id="active";
            console.log(this.id);

        }
    }
    function tclick(){
        //alert("Toggler clicked");
        if(this.id=="clicked"){
            this.id="empty";
            console.log(this.id);        
        }
        else{
            this.id="clicked";
            console.log(this.id);

        }
    }
$(document).ready(function(){
    $('.toggler').change(function(){ 
        if($(this).is('clicked')){
            $('#inactive').hide();
            $('#active').show();
        }
            else{
             $('#active').show();
             $('#inactive').show();
            }
      })
    });

但是，当我设置Click here to sort复选框时，其他复选框的每个状态都不会被隐藏。我觉得这是一个非常愚蠢的错误，请帮忙。

Answer 1

首先，id属性必须在DOM中必须是唯一的，因此您不能有多个具有有效或无效ID的元素。

这是主要问题，因为$('#inactive')仅返回它匹配的第一个元素（因为它应该是唯一的）。

此外，复选框具有checked属性，表示是否已选中它们，因此您的所有代码都可以进行检查，而不是一直更改id。

最后，您应该对文本使用label标记而不是p，以便单击文本也可以选中/取消选中该复选框。

（哦，.toggler复选框实际上是过滤而不是排序，其他）

因此，考虑到所有问题，您可以将代码简化为

$(document).ready(function() {
  $('.toggler').change(function() {
    
    if (this.checked) {
      $('.grouped').parent().hide();
      $('.grouped:checked').parent().show();
    } else {
      $('.grouped').parent().show();
    }
  })
});

label{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p><label><input type="checkbox" class="toggler">click here to filter</label></p>
<label><input type="checkbox" class="grouped">Hello1</label>
<label><input type="checkbox" class="grouped">Hello2</label>
<label><input type="checkbox" class="grouped">Hello3</label>

Answer 2

通过一些小技巧，您的代码会更容易。

第一件事，不要在运行时更改ID，这是一种不好的做法。复选框具有checked之类的属性，在通过false测试后，其评估结果为true或this.checked。

<input type= "checkbox" class="toggler" id="click_to_toggle" >click here to toggle 
<p class="item"><input type="checkbox" >Hello1</p>
<p class="item"><input type="checkbox" >Hello2</p>
<p class="item"><input type="checkbox">Hello3</p>

这是您唯一需要的JS：

$('#click_to_toggle').on('change', function(){
    if( this.checked ){
        $('.item').hide();
        $('.item input:checked').each(function(){
            $(this).closest('.item').show();
        });
    } else {
        $('.item').show();
    }
});

工作小提琴https://github.com/doxygen/doxygen/pull/6394

Answer 3

在HTML中将此元素this传递到元素本身，然后在JavaScript中使用该参数而不是this。另外，您需要将.is与:checked选择器一起使用，而不仅仅是clicked。我还将更改的.changed()更改为.clicked()，因为在这种情况下，它们是同一事件。您还可能要考虑将id / inactive中的active更改为class，因为所有id必须是唯一的。

function but_clicked(e) {
  if (e.id == "active") {
    e.id = "inactive";
    console.log(e.id);
  } else {
    e.id = "active";
    console.log(e.id);

  }
}

function tclick(e) {
  if (e.id == "clicked") {
    e.id = "empty";
    console.log(e.id);
  } else {
    e.id = "clicked";
    console.log(e.id);

  }
}
$(document).ready(function() {
  $('.toggler').click(function() {
    if($('.toggler').is(':checked')) {
      $('#inactive').hide();
      $('#active').show();
    } else {
      $('#active').show();
      $('#inactive').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="toggler" id="clicked" onclick="tclick(this)">click here to sort

<p><input type="checkbox" id="inactive" onClick="but_clicked(this)">Hello1</p>
<p><input type="checkbox" id="inactive" onClick="but_clicked(this)">Hello2</p>
<p><input type="checkbox" id="inactive" onClick="but_clicked(this)">Hello3</p>

jQuery选择性隐藏不起作用

3 个答案: