请考虑以下内容：
mvn package因此，在此选择器中使用mvn test来检查值是否被检查，如果是，则将一个类应用于与$('#num-locations input[type="checkbox"]').on('click', function(e) {
if (e.target.checked) {
var location = e.target.dataset.location;
$('.manage-wrapper').each(function() {
var city = $(this).data('city');
if (city !== location) {
$(this).toggleClass('hide-on-location');
}
});
} else {
$('.hide-on-location').toggleClass('hide-on-location');
}
});
属性不匹配的任何#num-locations input[type="checkbox"]。
当您取消选中上述复选框时，它将删除该类。很好。
这对.manage-wrapper中的一个复选框有效，但是，我在data-中具有多个复选框，由于它们是动态添加的，因此无法单独定位它们。
问题：
我该如何编写此代码，以便如果您选中1个或多个复选框将切换班级，而取消选中一个或多个复选框则将取消班级切换？
示例数据，所有与数据位置#num-locations input[type="checkbox"]不匹配的元素都将被隐藏，很好。取消选中，将显示#num-locations。
现在，检查Sample和Sample时，当我取消选中Sample时，任何与Crab Apple或Sample不匹配的元素都需要隐藏，应显示所有与Crab Apple匹配的元素，但所有与Crab Apple不匹配的元素仍应隐藏。
我无法检查特定属性，因为这是动态的。
答案 0 :(得分：1)
听起来您正在尝试创建一组通用的过滤复选框。如果是这样，下面的代码应该可以帮助您。我模拟了HTML，因为您没有将其包含在问题中，但是我认为它应该足够。
这里是一些使用的方法。
.map()将我们的 elements 集合更改为它们的 data-city 值
.get()以Array
.filter()将我们的manage-wrapper选择范围缩小到仅未选中
我还在代码本身中包含了注释，以更详细地记录每个步骤。
$("#num-locations input[type=checkbox]").on("click", refreshFilters);
function refreshFilters() {
var $checkedInputs = $("#num-locations input[type=checkbox]:checked");
var $manageWrappers = $(".manage-wrapper");
$manageWrappers.removeClass("hide-on-location"); //Start with all shown
if (!$checkedInputs.length) return; //If nothing is checked, exit early
//Get the checked cities as an array, e.g. ["New York", "Chicago"]
var cities = $checkedInputs.map(function() { return $(this).data("city") }).get();
//Find any .manage-wrapper whose data-location is NOT in that array, and hide it
$manageWrappers
.filter(function() { return !cities.includes($(this).data("location")); })
.addClass("hide-on-location");
}
.hide-on-location { display: none; }
#num-locations { margin-bottom: 10px; }
.manage-wrapper { border: 1px solid #ccc; padding: 10px; margin: 5px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num-locations">
<input type="checkbox" id="cb1" data-city="New York"> <label for="cb1">New York</label>
<input type="checkbox" id="cb2" data-city="Seattle"> <label for="cb2">Seattle</label>
<input type="checkbox" id="cb3" data-city="Chicago"> <label for="cb3">Chicago</label>
</div>
<div class="manage-wrapper" data-location="New York">New York</div>
<div class="manage-wrapper" data-location="Seattle">Seattle</div>
<div class="manage-wrapper" data-location="New York">New York</div>
<div class="manage-wrapper" data-location="Chicago">Chicago</div>
<div class="manage-wrapper" data-location="New York">New York</div>
<div class="manage-wrapper" data-location="Chicago">Chicago</div>
<div class="manage-wrapper" data-location="Seattle">Seattle</div>