Question

我不相信我会坚持这个！ 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;
}

Answer 1

我不知道我是否完全理解你的问题，但我的目的是什么。只需将disabled属性添加到您不希望在结果中显示的所有复选框，然后使用此{JSFiddle here，我已禁用西班牙语来修改您的js）：

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

Answer 2

知道了！我需要做的就是在.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)
})

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

2 个答案: