Question

我知道我可以使用jQuery的.filter（）按属性进行过滤。我也知道，自从W3C在HTML5中正式实现数据之后，这种自定义属性的使用就不受欢迎了。

但我仍然想知道为什么这不起作用。

JS：

$("[id^=hide]").click(function() {
    var lvl = $(this).attr('lvl');
    var id = $(this).attr('tar');

    $('#' + id).slideToggle(100);

    $('div').filter(function(lvl) {
        return $('this').attr('lvl') > lvl;
    }).slideToggle(100);
});

HTML：

<a id="hide1" lvl="0" tar="1"></a>
<div id="1" lvl="0"></div>
<a id="hide2" lvl="1" tar="2"></a>
<div id="2" lvl="1"></div>
<a id="hide3" lvl="2" tar="3"></a>
<div id="3" lvl="2"></div>
<a id="hide4" lvl="2" tar="4"></a>
<div id="4" lvl="2"></div>
<a id="hide5" lvl="1" tar="5"></a>
<div id="5" lvl="1"></div>
<a id="hide7" lvl="2" tar="7"></a>
<div id="7" lvl="2"></div>

我想要达到的目标是什么。 1.单击链接。 2.滑动切换靠近链接的div。 3. SlideToggle其他级别属性大于该链接的级别属性的div。

我也试图这样做：

$("[id^=hide]").click(function() {
    var lvl = $(this).attr('lvl');
    var id = $(this).attr('tar');

    $('#' + id).slideToggle(100);
    hideOthers(lvl);
});

var hideOthers = function(lvl) {
    $('div').filter(function(lvl) {
        return $('this').attr('lvl')> lvl;
    }).slideToggle(100);
}

但那也行不通。有什么想法吗？

Answer 1

<强> Updated Fiddle

在您的代码的这一行：

 $('div').filter(function(lvl) {

lvl被视为jquery filter() 函数中的索引，因此函数内的lvl值为 [0 - 1 - 2 .... nbr_of_divs] 。

修复此问题只需从param中删除lvl并直接使用它。

$('div').filter(function() {
    return $(this).attr('lvl') > lvl;
}).slideToggle(100);

从过滤器函数中的$(this)中删除撇号（'）：

替换：

return $('this').attr('lvl')> lvl;

通过：

return $(this).attr('lvl') > lvl;

它有效，希望有这个帮助。

Answer 2

你可以在这里使用turnery operator：

return $('this').attr('lvl')> lvl ? lvl : $('this').attr('lvl');

属性大于传递变量的jQuery元素（.filter（））

2 个答案: