2

我找不到关于这个问题的具体帖子。

基本上，我想要实现的是隐藏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

4 回答 4

5

存在三个问题：

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

于 2018-08-20T04:33:36.300 回答
1

在您的函数中，您返回比较的结果，该结果将退出函数并跳过代码的最后一部分。相反，您只想在小于时使用简单if的继续执行。data-product-id99335

此外，如果您使用$('.show')，您将始终选择所有具有 class 的元素show。为了防止这种情况，请使用 jQueryfind()将选择器限制为仅子元素。

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

于 2018-08-20T04:33:30.797 回答
1

有两个问题：

  • 在 return 语句之后，没有执行代码。
  • 此外，您需要捕获当前的 a 标签以隐藏。

看看，我在下面做了一个demo

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

于 2018-08-20T04:34:19.867 回答
1

不要使用return将停止执行回调函数中剩余代码行的语句，而是使用比较运算符，例如if.

其次，仅使用 jQuery 的 'children' 或 'find' 方法在上下文中选择当前元素的子元素。

没有必要在 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>

于 2018-08-20T04:37:54.030 回答