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

I can't find specific post regarding this issue.

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

Basically, what I'm trying to achieve is to hide the Compare text if the data-product-id is less than someValue

基本上,我想要实现的是,如果data-product-id小于someValue,则隐藏Compare文本

After some searching, this is what I came up with. There is no error but the code just won't do anything. I'm sure my code is wrong.

经过一番搜索,这就是我想出来的。没有错误,但代码不会做任何事情。我确定我的代码是错误的。

Can someone explain to me what wrong with my code and it'll be helpful if you guys include/explain the correct way to do it.

有人可以向我解释我的代码有什么问题,如果你们包含/解释正确的方法,它会有所帮助。

$("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 个解决方案

#1

There are three problems:

有三个问题:

First, you are calling return, and no code after the return statement will execute (meaning $('.show').addClass('hide') will never get called at all).

首先,您正在调用return,并且在return语句执行后没有代码(意味着$('。show')。addClass('hide')永远不会被调用。

You're not actually running a conditional check on the data-product-id value at all; you're simply returning it. Wrap this line in an if conditional instead of using return.

实际上,您根本没有对data-product-id值进行条件检查;你只是归还它。将此行换行为if条件而不是使用return。

Your final problem is that you simply call $('.show').addClass('hide'). This will hide all of the .show elements if any of the parents meet the condition. To correct this, you should make use of .find() with $(this).find('.show').

你最后的问题是你只需要调用$('。show')。addClass('hide')。如果任何父母满足条件,这将隐藏所有.show元素。要纠正这个问题,你应该使用.find()和$(this).find('。show')。

Here's a working example:

这是一个有效的例子:

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

#2

There were two problems:

有两个问题:

After return statement, there is no execution of the code.

在return语句之后,没有执行代码。

Also, you need to catch the current a tag to hide.

此外,您需要捕获当前标记以隐藏。

Have a look, I have made a demo below

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

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

#3

Instead of using a return statement which will stop the execution of remaining lines of code in your callback function, use a comparison operator like if.

而不是使用一个将停止执行回调函数中剩余代码行的return语句,而是使用if之类的比较运算符。

Secondly, only select the children of current element in context using 'children' or 'find' method of jQuery.

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

There is no need of using !important in CSS.

在CSS中不需要使用!important。

Hope that solves the issue.

希望能解决这个问题。

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

#4

In your function you return the result of your comparison, which exits the function and skips the last part of your code. Instead you want to use a simple if to continue execution only when the data-product-id is less than 99335.

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

Furthermore, if you use $('.show'), you would always select all elements with the class show. To prevent this, use jQuery's find() to limit the selector to child elements only.

此外,如果您使用$('。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>

#1