代码之家 › 专栏 › 技术社区 › iceiceicy

带筛选值的jQuery目标选择器属性并添加新类

css html jquery javascript

iceiceicy · 技术社区 · 7 年前

基本上,我想要达到的是隐藏 Compare data-product-id 小于 someValue

经过一番寻找,这就是我想到的。没有错误,但代码不会做任何事情。我肯定我的密码是错的。

有人能给我解释一下我的代码有什么问题吗?如果你们能提供/解释正确的方法,这会很有帮助的。

$("a[data-product-id]").filter(function() {
    return parseInt($(this).attr("data-product-id")) < 99335;
    $('.show').addClass('hide');
});

.hide {
  display: none !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="button" data-product-id="99336" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99335" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99334" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99333" rel="nofollow"><p class="show">Compare</p></a>

4 回复 | 直到 7 年前

Obsidian Age 7 年前

有三个问题:

return ,之后没有代码 返回 语句将执行(意思是 $('.show').addClass('hide') 永远不会有人打电话来)。
你实际上没有对 data-product-id if 有条件而不是使用 返回 .
你的最后一个问题是 . 这将隐藏 全部的 的 .show 元素如果任何 .find() 具有 $(this).find('.show') .

$("a[data-product-id]").filter(function() {
  if (parseInt($(this).attr("data-product-id")) < 99335) {
    $(this).find('.show').addClass('hide');
  }
});

.hide {
  display: none !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="button" data-product-id="99336" rel="nofollow">
  <p class="show">Compare</p>
</a>
<a href="#" class="button" data-product-id="99335" rel="nofollow">
  <p class="show">Compare</p>
</a>
<a href="#" class="button" data-product-id="99334" rel="nofollow">
  <p class="show">Compare</p>
</a>
<a href="#" class="button" data-product-id="99333" rel="nofollow">
  <p class="show">Compare</p>
</a>

Tushar Gupta 7 年前

有两个问题:

此外,还需要捕捉当前的a标记以隐藏。

$("a[data-product-id]").filter(function() {
    if( parseInt($(this).attr("data-product-id")) < 99335){
    $(this).removeClass('show').addClass('hide');}
});

.hide {
  display: none !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="button" data-product-id="99336" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99335" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99334" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99333" rel="nofollow"><p class="show">Compare</p></a>

pixlboy 7 年前

而不是使用 return 语句,该语句将停止回调函数中剩余代码行的执行,使用类似于 if .

不用了!在CSS中很重要。

希望能解决问题。

$("a[data-product-id]").filter(function() {
    if(parseInt($(this).attr("data-product-id")) < 99335){
        $(this).children('.show').addClass('hide');
    }
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="button" data-product-id="99336" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99335" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99334" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99333" rel="nofollow"><p class="show">Compare</p></a>

SapuSeven 7 年前

在函数中,返回比较结果,比较结果将退出函数并跳过代码的最后一部分。相反,你想用一个简单的 if 仅当 data-product-id 小于 99335 .

此外,如果您使用 $('.show') ,您将始终选择类中的所有元素 show . 要防止这种情况,请使用jQuery的 find() 将选择器仅限于子元素。

$("a[data-product-id]").filter(function() {
    if (parseInt($(this).attr("data-product-id")) < 99335)
        $(this).find('.show').addClass('hide');
});

.hide {
  display: none !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="button" data-product-id="99336" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99335" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99334" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99333" rel="nofollow"><p class="show">Compare</p></a>