复选框过滤jQuery

Question

我需要你的帮助

我跟随一些教程，用jQuery创建一个可过滤的网格。很简单，网格包含广播节目(发射)，每个节目都有一个播放日。目的是让游客选择日期，并显示当天的节目。

代码工作得很好，但我需要进一步开发它。

我添加了检查日期和自动检查当前日期的条件。问题是，当页面加载时，选择了日期，但过滤器不应用。我已经显示了所有的排放。

我的目标是:

• 显示加载页面时当天的广播
• [BONUS]:不允许访客取消选择所选日期。因此，至少有一天选择不显示所有节目。

jQuery(function($) {
var today = new Date();
if (today.getDay() == 1) {
$(".monday").attr("checked", "true");
}
if (today.getDay() == 2) {
$(".tuesday").attr("checked", "true");
}
if (today.getDay() == 3) {
$(".wednesday").attr("checked", "true");
}
if (today.getDay() == 4) {
$(".thursday").attr("checked", "true");
}
if (today.getDay() == 5) {
$(".friday").attr("checked", "true");
}
if (today.getDay() == 6) {
$(".saturday").prop('checked', true);
}
if (today.getDay() == 7) {
$(".sunday").attr("checked", "true");
}
})
jQuery.expr[":"].CIcontains = jQuery.expr.createPseudo(function(arg) {
return function(elem) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
jQuery('.filtre-jour input[type="checkbox"]').change(function() {
var thisID = jQuery(this).attr('id');
jQuery('.filtre-jour input[type="checkbox"]').each(function() {
if (jQuery(this).attr('id') != thisID) {
jQuery(this).prop('checked', false);
}
})
if (jQuery(this).is(':checked')) {
var curr_text = jQuery(this).data('search-term');
filterResults(curr_text);
} else {
filterResults('');
}
});
function filterResults(curr_text) {
jQuery('.emission-card').hide();
jQuery('.emission-card:CIcontains("' + curr_text + '")').show();
}

<div class="checkboxes">
<input id="#monday" class="monday" data-search-term="monday" type="checkbox">
<label class="inline-checkbox" for="#monday">Lundi</label>
<input id="#tuesday" class="tuesday" data-search-term="tuesday" type="checkbox">
<label class="inline-checkbox" for="#tuesday">Mardi</label>
<input id="#wednesday" class="wednesday" data-search-term="wednesday" type="checkbox">
<label class="inline-checkbox" for="#wednesday">Mercredi</label>
<input id="#thursday" class="thursday" data-search-term="thursday" type="checkbox">
<label class="inline-checkbox" for="#thursday">Jeudi</label>
<input id="#friday" class="friday" data-search-term="friday" type="checkbox">
<label class="inline-checkbox" for="#friday">Vendredi</label>
<input id="#saturday" class="saturday" data-search-term="saturday" type="checkbox">
<label class="inline-checkbox" for="#saturday">Samedi</label>
<input id="#sunday" class: "sunday" data-search-term="sunday" type="checkbox">
<label class="inline-checkbox" for="#sunday">Dimanche</label>
</div>

Answer 1

我认为您可以通过使用复选框的索引来简化，并隐藏那些最初不是的复选框。这应该与相应的卡一起工作，但这可能比您在比较中使用的更简单。参见第二个例子

jQuery(function($) {
let today = new Date();
myday = today.getDay();
$('.day-check').eq(myday - 1).prop("checked", true);
$('.day-card').not($('.day-card').eq(myday - 1)).hide();
})
jQuery.expr[":"].CIcontains = jQuery.expr.createPseudo(function(arg) {
return function(elem) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
function filterResults(curr_text) {
jQuery('.day-card').hide();
jQuery('.day-card:CIcontains("' + curr_text + '")').show();
}
jQuery('.filtre-jour')
.find('input[type="checkbox"]')
.on('change', function() {
// var thisID = jQuery(this).attr('id');
jQuery('.filtre-jour')
.find('input[type="checkbox"]')
.not(this).prop('checked', false);
if (jQuery(this).is(':checked')) {
let curr_text = jQuery(this).data('search-term');
filterResults(curr_text);
} else {
filterResults('');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtre-jour">
<div class="checkboxes">
<input id="#monday" class="day-check monday" data-search-term="monday" type="checkbox">
<label class="inline-checkbox" for="#monday">Lundi</label>
<input id="#tuesday" class="day-check tuesday" data-search-term="tuesday" type="checkbox">
<label class="inline-checkbox" for="#tuesday">Mardi</label>
<input id="#wednesday" class="day-check wednesday" data-search-term="wednesday" type="checkbox">
<label class="inline-checkbox" for="#wednesday">Mercredi</label>
<input id="#thursday" class="day-check thursday" data-search-term="thursday" type="checkbox">
<label class="inline-checkbox" for="#thursday">Jeudi</label>
<input id="#friday" class="day-check friday" data-search-term="friday" type="checkbox">
<label class="inline-checkbox" for="#friday">Vendredi</label>
<input id="#saturday" class="day-check saturday" data-search-term="saturday" type="checkbox">
<label class="inline-checkbox" for="#saturday">Samedi</label>
<input id="#sunday" class="day-check sunday" data-search-term="sunday" type="checkbox">
<label class="inline-checkbox" for="#sunday">Dimanche</label>
</div>
</div>
<div class="cards">
<div class="day-card">emission-card monday</div>
<div class="day-card">emission-card tuesday</div>
<div class="day-card">emission-card WEDNESDAY</div>
<div class="day-card">emission-card Thursday</div>
<div class="day-card">emission-card friday</div>
<div class="day-card">emission-card saturday</div>
<div class="day-card">emission-card sunday</div>
</div>

不那么复杂

jQuery(function($) {
let today = new Date();
let myday = today.getDay();
$('.day-check').eq(myday - 1).prop("checked", true);
$('.day-card').not($('.day-card').eq(myday - 1)).hide();
$('.day-check').prop("disabled",true);
});
/* do not need if not allow changes 
function filterResults(useDay) {
jQuery('.day-card').hide();
jQuery('.day-card' + useDay).show();
}
jQuery('.filtre-jour')
.find('input[type="checkbox"]')
.on('change', function() {
jQuery('.filtre-jour')
.find('input[type="checkbox"]')
.not(this).prop('checked', false);
let term = jQuery(this).is(':checked') ? "." + jQuery(this).data('search-term') : "";
filterResults(term);
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtre-jour">
<div class="checkboxes">
<input id="#monday" class="day-check monday" data-search-term="monday" type="checkbox">
<label class="inline-checkbox" for="#monday">Lundi</label>
<input id="#tuesday" class="day-check tuesday" data-search-term="tuesday" type="checkbox">
<label class="inline-checkbox" for="#tuesday">Mardi</label>
<input id="#wednesday" class="day-check wednesday" data-search-term="wednesday" type="checkbox">
<label class="inline-checkbox" for="#wednesday">Mercredi</label>
<input id="#thursday" class="day-check thursday" data-search-term="thursday" type="checkbox">
<label class="inline-checkbox" for="#thursday">Jeudi</label>
<input id="#friday" class="day-check friday" data-search-term="friday" type="checkbox">
<label class="inline-checkbox" for="#friday">Vendredi</label>
<input id="#saturday" class="day-check saturday" data-search-term="saturday" type="checkbox">
<label class="inline-checkbox" for="#saturday">Samedi</label>
<input id="#sunday" class="day-check sunday" data-search-term="sunday" type="checkbox">
<label class="inline-checkbox" for="#sunday">Dimanche</label>
</div>
</div>
<div class="cards">
<div class="day-card monday">Happy monday</div>
<div class="day-card tuesday">Happy tuesday</div>
<div class="day-card wednesday">Happy WEDNESDAY</div>
<div class="day-card thursday">Happy Thursday</div>
<div class="day-card friday">Happy friday</div>
<div class="day-card saturday">Happy saturday</div>
<div class="day-card sunday">Happy sunday</div>
</div>