Атрибут селектора цели jQuery со значением фильтра и добавлением нового класса

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>

javascript jquery html css

2

Nazrin Noorzan 20 Авг 2018 в 07:26

Answer 1

Вместо использования оператора return, который остановит выполнение оставшихся строк кода в функции обратного вызова, используйте оператор сравнения, например if.

Во-вторых, только выбирайте дочерние элементы текущего элемента в контексте, используя метод 'children' или 'find' из jQuery.

Нет необходимости использовать! Важное в 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>

1

rach8garg 20 Авг 2018 в 04:37

Answer 2

Было две проблемы:

После оператора return выполнение кода не выполняется.
Также вам нужно поймать текущий тег, чтобы скрыть.

Посмотрите, я сделал демо ниже

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

1

Tushar 20 Авг 2018 в 04:34

Answer 3

В вашей функции вы возвращаете результат сравнения, который выходит из функции и пропускает последнюю часть вашего кода. Вместо этого вы хотите использовать простой 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>

1

SapuSeven 20 Авг 2018 в 04:46

Атрибут селектора цели jQuery со значением фильтра и добавлением нового класса

3 ответа

Похожие вопросы

Новые вопросы

javascript