jQuery,显示两个不同的列表,选中了通用的“rel”复选框
jquery, show two different lists with common 'rel' on checkbox checked
我有三个列表,A,B和C。A 是复选框筛选器的列表。B&C是动态结果集。现有的JS与A&B配合得很好。我正在尝试添加 C,但无法使其工作。
我的想法是给它们相同的rel,并使用相同的控件来显示/隐藏两个列表中的元素:
如果在列表 A 中选中了带有 rel = "x" 的复选框,则在列表 B(效果很好)和列表 C(当前失败)中显示具有匹配 rel 的元素。
编辑:在下面的JS中,$lis是列表B。扇区中的rel属性在列表A和B中,我已经按照建议将其作为一个类添加到C中。
列表 C 现在作为排他性运行,但目标是累加的(在列表 A 中选中的任何内容都显示在那里)。
这是 JS
$('div.tags').delegate('input[type=checkbox]', 'change', function()
{
var $lis = $('.results > li'),
$checked = $('input:checked');
if ($checked.length)
{
var selector = $checked.map(function ()
{
return '.' + $(this).attr('rel');
}).get().join('');
$lis.hide().filter(selector).show();
$("#allFilteredOut").html(($(".filterThis:visible").length === 0)?"No matches found - please adjust filter selections.":"");
}
else
{
$lis.show();
}
var numVisible = $('.filterThis:visible').length
$("#visibleItems span").html(numVisible + " Available");
});
它在页面加载时运行(使用"document.ready"而不是"delegate"),然后选中复选框,如上所述。
我的想法是将第二个添加到这个脚本中,如$test:
$('div.tags').delegate('input[type=checkbox]', 'change', function()
{
var $lis = $('.results > li'),
$test = $('.testing > span'),
$checked = $('input:checked');
if ($checked.length)
{
var selector = $checked.map(function ()
{
return '.' + $(this).attr('rel');
}).get().join('');
$lis.hide().filter(selector).show();
$test.hide().filter(selector).show();
$("#allFilteredOut").html(($(".filterThis:visible").length === 0)?"No matches found - please adjust filter selections.":"");
}
else
{
$lis.show();
$test.show();
}
var numVisible = $('.filterThis:visible').length
$("#visibleItems span").html(numVisible + " Available");
});
但它似乎不起作用。我得到的是列表 C 中的所有元素在选中复选框时消失,并在取消选中时重新出现。
列表 C 的 HTML/PHP:我相信我正在通过通用的"rel"解决div 中的个人问题,但无论选中哪个复选框,每个跨度都会被隐藏。
编辑:这似乎仅在html是一个列表时才有效,因此更新了以下内容:
<ul class="testing">
<?php if ($catReqType == "category") {
if (empty($category)) {
// Market page making category request
$category = $market;
}
mysql_data_seek($rsCategories,0);
do {
echo '<li class="' . $row_rsCategories['category'] . '">' . $row_rsCategories['nice_cat_name'] . '</li>';
} while ($row_rsCategories = mysql_fetch_assoc($rsCategories));
} ?>
</ul>
PHP if 条件在过滤之前为我提供了所需的初始结果集。将有一个 else 将使用一组备用值填充列表 C,再次使用公共 rel,以便与过滤器一起使用。
任何意见将不胜感激。如果您想发布另一段代码,请告诉我。
多谢。
看起来复选框上的 rel 必须与列表 C span 上的类匹配。
以下代码抓取复选框上的 rel 并在前面加上一个点:
var selector = $checked.map(function ()
{
return '.' + $(this).attr('rel');
}).get().join('');
然后,稍后在此处使用该选择器:
$test.hide().filter(selector).show();
尝试更改:
echo '<span rel="' . $row_rsCategories['category'] . '">' . $row_rsCategories['nice_cat_name'] . '</span>';
自
echo '<span class="' . $row_rsCategories['category'] . '">' . $row_rsCategories['nice_cat_name'] . '</span>';
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 从复选框和Selects-KnockoutJS中获取值的总和
- 选中多个具有相同名称的复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 使用$.ajax发布多个复选框
- AngularJS单选筛选不适用于Name、Description和Field4复选框值
- 使用jquery选中/取消选中单个复选框
- Angular JS Filter-通过3个复选框进行筛选
- 如果选中了多个复选框,如何添加事件
- Javascript复选框函数:;缺少:在属性id之后"
- JavaScript-切换“;全部检查”;复选框true/false
- 如何从javascript/jquery中的复选框中获取布尔值
- 在Ajax中捕获复选框值
- 显示隐藏复选框
- jQuery,显示两个不同的列表,选中了通用的“rel”复选框
- 如何在使用value和rel属性更改选项元素时检查复选框