在排序前从复选框列表的一部分中排除项目

不能相信我被困在这！ JS小提琴https://jsfiddle.net/27a8qypq/显示国家按字母顺序从3个区域复选框选项的任意组合中出现。将来我会希望使用JS代码中的指令来限制国家/地区列表的范围。例如，即使勾选了所有3个复选框，我可能也希望代码排除所有亚洲国家的出现，但保留显示的其他国家/地区的字母顺序。我尝试使用.filter（）和.detach（）和.remove（），如以前的帖子中所建议的，但我无法获得任何工作。在排序前从复选框列表的一部分中排除项目

任何人都可以提出如何我可以添加一个小的修改JS代码，所以我可以排除1或2区域的国家被显示？理想情况下，我不想重构HTML。谢谢

<label> 
<input type="checkbox" name="colorCheckbox" id="Europe" />Europe</label> 
<label> 
<input type="checkbox" name="colorCheckbox" id="Africa" />Africa</label> 
<label> 
<input type="checkbox" name="colorCheckbox" id="Asia" />Asia</label> 


<div class="mywrapper"> 

<label class="myEurope"> 
<input type="checkbox" value="Spain" />Spain</label> 
<label class="myEurope"> 
<input type="checkbox" value="Germany" />Germany</label> 
<label class="myEurope"> 
<input type="checkbox" value="Austria" />Austria</label> 

<label class="myAfrica"> 
<input type="checkbox" value="Nigeria" />Nigeria</label> 
<label class="myAfrica"> 
<input type="checkbox" value="Egypt" />Egypt</label> 
<label class="myAfrica"> 
<input type="checkbox" value="Kenya" />Kenya</label> 

<label class="myAsia"> 
    <input type="checkbox" value="Thailand" />Thailand</label> 
<label class="myAsia"> 
    <input type="checkbox" value="China" />China</label> 
<label class="myAsia"> 
    <input type="checkbox" value="Japan" />Japan</label> 

</div> 





function sortByText(a, b) { 
return $.trim($(a).text()) > $.trim($(b).text()); 
} 

var li = $(".mywrapper").children("label").detach().sort(sortByText) 
$(".mywrapper").append(li) 

$('input[type="checkbox"]').click(function() { 
$('.my' + $(this).attr("id")).slideToggle(200) 
}) 




.mywrapper { 
border: 1px solid blue; 
height: 200px; 
width: 300px; 
border: 1px solid blue; 
} 

.myEurope { 
display: none; 
} 

.myAfrica { 
display: none; 
} 

.myAsia { 
display: none; 
}

来源

2016-11-06 Silverburch

我不知道我是否完全理解你的问题，但我的目的是什么。就在disabled属性添加到您不希望在搜索结果所有复选框，以及与此修改您的JS（JSFiddle here，我已禁用西班牙为例）：

$('input[type="checkbox"]').click(function() { 
    $('.my' + $(this).attr("id") + " > input:enabled").each(function() { 
     $(this).parent().toggle(); 
    }); 
});

来源

2016-11-06 18:48:59 soywod

对不起，我不够清楚。我想要做的就是放弃整个地区，从而禁用其中的所有国家。我宁愿不修改带有禁用属性的HTML。是否没有修改jquery的方法，它在“.mywrapper”（starts var li = ...）中对列表进行排序，以便它可以排除“亚洲”。或者，是否有一个命令可以隐藏jquery最后一行的所有亚洲国家？谢谢 – Silverburch

明白了！我所需要做的就是在.slideToggle（0）之前添加.removeClass（类名）。在jQuery上。所以如果我想排除“myAsia”类中的国家我的jQuery调整如下：

function sortByText(a, b) { 
return $.trim($(a).text()) > $.trim($(b).text()); 
} 

var li = $(".mywrapper").children("label").detach().sort(sortByText) 
$(".mywrapper").append(li) 

$('input[type="checkbox"]').click(function() { 
$('.my' + $(this).attr("id")).removeClass("myAsia").slideToggle(200) 
})

来源

2016-11-07 16:19:38 Silverburch

在排序前从复选框列表的一部分中排除项目

回答

相关问题