JQuery过滤器基于无线电输入类型-嵌套在下拉列表中时发出问题

Question

我有很多过滤器，可以更新页面上的卡片列表。

随着过滤器选项的增加，我现在把它们移到了一个下拉列表中，以获得更好的用户体验。我现在遇到了一个问题，数据(卡(不再识别所选的过滤器，因此不会进行过滤。筛选器数据目标保持不变。例如，当选择"；闭合的"；只应显示状态为关闭的数据。

$(document).ready(function() {
// Existing - Display cards based on filter select:
$('.filter-data').on('change', 'input[type=radio]', function() {
var filtername = $(this).attr('name');
var filtervalue = $(this).val();
$('.cards').attr('data-' + filtername + '-match', filtervalue);
$('.cards').attr('data-visible-count', $('.cards .card:visible').length);
});
// NEW - Change the button text & add active class:
$('.input-select').change(function() {
var dropdown = $(this).closest('.dropdown');
var thislabel = $(this).closest('label');
dropdown.find('label').removeClass('active');
if ($(this).is(':checked')) {
thislabel.addClass('active');
dropdown.find('ins').html(thislabel.text());
}
});
// New - Add tabindex on labels:
$('label.dropdown-item').each(function(index, value) {
$(this).attr('tabindex', 0);
$(this).find('input').attr('tabindex', -1);
});
// New - Add keyboard navigation:
$('label.dropdown-item').keypress(function(e) {
if ((e.keyCode ? e.keyCode : e.which) == 13) {
$(this).trigger('click');
}
});
});

下拉式过滤器结构：

<div class="dropdown">
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown"> <ins>Filter</ins> </button>
<div class="dropdown-menu radio filter-data">
<label class="dropdown-item" for="status_all">
<input type="radio" class="input-select" value="all" name="status" id="status_all">
<div>All</div>
</label>
<label class="dropdown-item" for="open">
<input type="radio" class="input-select" value="open" name="status" id="status_open">
<div>Open</div>
</label>
<label class="dropdown-item" for="closed">
<input type="radio" class="input-select" value="closed" name="status" id="status_closed">
<div>Closed</div>
</label>
</div>
</div>

使用简化版的卡片布局-我正试图将过滤器应用于：

<div class="col-xs-12 col-md-6 col-xl-4 mb-3 card-wrapper" data-status="open">
<div class="card">
<div>Testing content</div>
</div>
</div>
<div class="col-xs-12 col-md-6 col-xl-4 mb-3 card-wrapper" data-status="closed">
<div class="card">
<div>Testing content</div>
</div>
</div>

对于filter数据类，在jQuery中使用"this"是否在正确的上下文中使用？或者现在这个目标不正确？

Answer 1

如果您想隐藏/显示卡片

替换此：

$('.cards').attr('data-' + filtername + '-match', filtervalue);
$('.cards').attr('data-visible-count', $('.cards .card:visible').length);

这个：

$('.card-wrapper').hide();
$('.card-wrapper [data-' + filtername + '="' + filtervalue + '"]').show();

Answer 2

解决了我的问题。原来我使用的是jQuery closest((；不正确，也与活动类有关。

进行了重组，以获得正确的元素。

感谢那些为此提供帮助的人。

$(document).ready(function() {

//EXISTING:
$('.filters').on('change', 'input[type=radio]', function() {
var filtername = $(this).attr('name');
var filtervalue = $(this).val();
$('.cards').attr('data-' + filtername + '-match', filtervalue );
$('.cards').attr('data-visible-count', $('.cards .card:visible').length );
});

// NEW - Change the button text & add active class:
$('.input-select').change(function() {
var dropdown = $(this).closest('.dropdown');
var thislabel = $(this).closest('label');
dropdown.find('inst').html(thislabel.text());
console.log(dropdown);
console.log(thislabel);
});  

// NEW - Add tabindex on labels:
$('label.dropdown-item').each(function(index, value) {
$(this).attr('tabindex', 0);
$(this).find('input').attr('tabindex', -1);
});
// NEW - Add keyboard navigation:
$('label.dropdown-item').keypress(function(e) {
if ((e.keyCode ? e.keyCode : e.which) == 13) {
$(this).trigger('click');
}
});
});