javascript - 属性大于传递变量 (.filter()) 的 jQuery 元素

Question

我知道我可以使用 jQuery 的 .filter() 按属性进行过滤。我还知道，自从 W3C 在 HTML5 中正式实现 data-thing 以来，使用此类自定义属性是不受欢迎的。

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

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. SlideToggle 靠近链接的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 ]。

要解决这个问题，只需从参数中删除 lvl 并直接使用它。

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

同时从过滤器函数内的 $(this) 中删除撇号 ('):

替换:

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

作者:

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

它有效，希望这有帮助。