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

jQuery elements with attribute greater than passed variable (.filter())

本文关键字：jQuery 元素 大于 filter 变量 属性      更新时间：2023-09-26

我知道我可以使用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. 滑动切换靠近链接的div。3.滑动切换所有level属性大于该链接level属性的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);
}

但这也不起作用。什么好主意吗?

更新小提琴

在代码的这一行:

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

在jquery filter()函数中作为索引的lvl，因此函数中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;

你可以在这里使用翻转运算符:

和 

return $('this').attr('lvl')> lvl ? lvl : $('this').attr('lvl');
相关文章：