Question

我找不到有关此问题的具体帖子。

基本上，我要实现的是如果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>

Answer 1

存在三个问题：

首先，您正在调用 return ，并且return语句之后将不会执行任何代码（这意味着$('.show').addClass('hide')将永远不会被调用）。 / li>
您实际上根本没有对data-product-id值进行条件检查；您只是将其归还。将此行换成if有条件的，而不是使用return。
您的最后一个问题是您只需致电$('.show').addClass('hide')。如果任何个父母满足条件，这将隐藏.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>

Answer 2

在函数中，您将返回比较结果，这将退出函数并跳过代码的最后一部分。相反，您只想使用简单的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>

Answer 3

有两个问题：

返回语句后，将不执行代码。
此外，您需要捕获当前要隐藏的标签。

看看，我在下面做了一个演示

$("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>

Answer 4

使用return之类的比较运算符代替使用if语句，该语句将停止执行回调函数中剩余的代码行。

第二，仅使用jQuery的“子项”或“查找”方法在上下文中选择当前元素的子项。

不需要在CSS中使用！important。

希望能解决这个问题。

$("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>

具有过滤器值的jQuery目标选择器属性，并添加新类

4 个答案: