1

Привел тестовый пример с сайта для удобства. Вроде бы всё норм: нажатие на кнопку корзины и появление счетчика товаров. После перезагрузки страницы на сайте уже не будет ни кнопки, ни счётчика (т.к в css у счётчика товаров "num" display:none). Просьба помочь, как реализовать проверку условия: если виден элемент счётчик, то спрятать кнопку, иначе - показать кнопку добавления в корзину

$('.add2cart').click(function(e) {
            e.preventDefault();
            $(this).hide();
            $(this).prev('.num').show();

});
.num {
   display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="num" type="number" placeholder="кол-во">
<a class="add2cart" href="">
  <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/38919-200.png" alt="">
</a>

Я попытался сделать такое условие:

if ( $( ".add2cart" ).length ) {
                $( ".num" ).show();
            } else {
                $( ".num" ).hide();
}
1
  • После перезагрузки страницы на сайте уже не будет ни кнопки - ну да, кнопка же сама по себе пропадает.
    – user256824
    12 июн 2019 в 3:38

2 ответа 2

-1

Если нужно убедиться, что у блока нет CSS свойства display:none, то подойдёт такой код:

$(function(){
  console.log($('.num').css('display')=='none'?'Да, он невидем!':'Блок видимый')
 })
.num{
  display:none;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="num"></div>

Под вашу задачу:

let button=$('button')
if($('.num').css('display')=='none') button.show()
else button.hide()

Если ещё ваши селекторы подставить:

let button=$('.num')
if($('.add2cart').css('display')=='none') button.show()
else button.hide()
3
  • вот такое условие нужно. если виден элемент счётчик, то спрятать кнопку, иначе - показать кнопку добавления в корзину
    – stiv
    24 июл 2018 в 9:05
  • @StepanIvanov это же просто if и else подставить: let button=$('button') if($('.num').css('display')=='none') button.show() else button.hide()
    – Diskyp
    24 июл 2018 в 9:10
  • Изменил ответ, там симпатичнее выглядит.
    – Diskyp
    24 июл 2018 в 9:11
-1

Если в css стоит

.add2cart{
  display: none;
}

Тогда достаточно

$(function(){
  if($('.num:visible').length > 0)
    $('.add2cart').fadeIn();
});
5
  • Тащемта события DOM мутации лучше не использовать, они были удалены из стандарта: developer.mozilla.org/en-US/docs/Web/Guide/Events/…
    – Diskyp
    24 июл 2018 в 9:22
  • Теперь приходится использовать громоздкие обсёрверы.
    – Diskyp
    24 июл 2018 в 9:23
  • @Diskyp спасибо, буду знать
    – goodmice
    24 июл 2018 в 9:28
  • Если так не стоит, то как тогда лучше прописать это?
    – stiv
    25 июл 2018 в 1:11
  • @StepanIvanov тогда можно поставить в css или дописать в js "else $('.add2cart').fadeOut();"
    – goodmice
    25 июл 2018 в 2:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.