javascript - 如何将复选框选中的字符串值与 li 元素进行比较以编辑最后一个
问题描述
如何将复选框选中的字符串值与 li 元素进行比较以编辑最后一个。例如。
jQuery(function($){
// start ajax
$('#filter input[type="checkbox"]').on('change', function(){
var filter = $('#filter');
/* Stuff to do every *odd* time the element is clicked */
$.ajax({
url:filter.attr('action'),
data:filter.serialize(), // form data
type:filter.attr('method'), // POST
beforeSend:function(xhr){
filter.find('button').css('opacity', '1').text('Загрузка...');
// changing the button label
},
success:function(data){
filter.find('button').css('opacity', '0');; // changing the button label back
if($(".checkbox:checked").length == 0) {
$('#response').empty();
} else {
$('#response').html(data);
};
$(".usage-product-list li").each(function () {
if ($(this).text() == 'Усиление иммунитета') {
$(this).css('color', 'red');
}
});
}
});
return false;
});
//end jquery ajax
// load more toggle start
$('.load-more').toggle(function() {
$(this).html('Меньше параметров <i class="fas fa-angle-up"></i>');
$('.row-wrap').slideDown('slow');
}, function() {
$(this).html('Больше параметров <i class="fas fa-angle-down"></i>');
$('.row-wrap').slideUp('slow');
});
// load more toggle end
$('#filter input[type="checkbox"]').click(function () {
$(this).siblings('span').toggleClass('active');
});
// end of stack
});
// end of stack
在我的代码中,如果 li 包含我放入字符串的文本,我必须更改它的颜色,但是如何使用等于每个选中复选框父 LABEL 字符串值的文本字符串更改每个 li 颜色?
$(".usage-product-list li").each(function () {
if ($(this).text() == 'Усиление иммунитета') {
$(this).css('color', 'red');
}
});
<label><span></span><input class="checkbox" type="checkbox" name="usage_uluchpoedaemost"/>Улучшение поедаемости</label>
<label><span></span><input class="checkbox" type="checkbox" name="usage_usilimmun"/>Усиление иммунитета</label>
解决方案
只需将其添加到您的success
函数中,而不是$(".usage-product-list li").each(function () {});
:
let checked = $("input[type='checkbox']:checked")
checked.each(function() {
let labelText = $(this).closest("label").text();
$(".usage-product-list li").each(function() {
if ($(this).text() == labelText) {
$(this).css('color', 'red');
}
});
});
推荐阅读
- reporting-services - 如何在 SSRS 中使用 OR 关键字在 tablix 过滤中使用 LIKE
- c# - 是否可以将其他内容发送到事件记录器然后系统信息?
- go - 如何使用“go get”安装软件包
- javascript - 将数字转换为两位小数
- python-3.x - QMessageBox 输出
- python - 没有分配外键 - Django
- spring-boot - Spring启动应用程序在应用程序启动时抛出RelaxedPropertyResolver错误
- java - 如何通过 CardLayout 显示在 GroupLayout 中创建的布局
- telegram - 如何与 Telegram 的位置进行交互?
- css - 如何计算 IE11 中 CSS Grid 列的宽度以进行动画处理?