Как лучше написать скрипт изменения картинки от количества?

Question

[viktorulyushev]

Есть счетчик желаний,у каждого товара есть кнопка добавить в список желаний,при нажатии на эту кнопку счетчик увеличивается или уменьшается,мне нужно чтобы когда на счетчике 0 картинка была одна,а когда больше нуля то другая,пришлось как то закостылить сильно,можно ли было это сделать легче?

if($(".wishlist-header-block-count").text() > 0){
                $(".cart-mini-wishlist-img").css("background","url(/Templates/Shopnz/images/wishcustom-hover.png) no-repeat center center")
            } else {
                $(".cart-mini-wishlist-img").css("background","url(/Templates/Shopnz/images/wishcustom.png) no-repeat center center")
            }

            $(".wishlist-control").on("click",function(){
                function asd(){
                    var q = $(".wishlist-header-block-count").text();
                    if(q > 0){
                        $(".cart-mini-wishlist-img").css("background","url(/Templates/Shopnz/images/wishcustom-hover.png) no-repeat center center")
                    } else {
                        $(".cart-mini-wishlist-img").css("background","url(/Templates/Shopnz/images/wishcustom.png) no-repeat center center")
                    }
                }
                setTimeout(asd,500);
            });

при чем пришлось добавить задержку,т.к при клике значение еще старое

Answer 1

[Степан Крапивин]

Сделай это стилями и в коде добавляй только класс для блока.

.wish {
  background: url(/Templates/Shopnz/images/wishcustom-hover.png) no-repeat center center;
}
.no-wish {
  background: url(/Templates/Shopnz/images/wishcustom.png) no-repeat center center;
}

if($(".wishlist-header-block-count").text() > 0){
  $(".cart-mini-wishlist-img").removeClass("no-wish");
  $(".cart-mini-wishlist-img").addClass("wish");
} else {
  $(".cart-mini-wishlist-img").removeClass("wish");
  $(".cart-mini-wishlist-img").addClass("no-wish");
}
// и так далее...

Comments

[viktorulyushev]

Не,срабатывает не правильно

[TheRevan]

viktorulyushev, так это нужно в обработчик пихать

[Степан Крапивин]

viktorulyushev, ну так поправь как надо под свои нужны. Общая суть же понятна. Неужели я за тебя твой код буду писать?

[Степан Крапивин]

TheRevan, viktorulyushev,

так это нужно в обработчик пихать

стили пихать в файл стилей, if() который я описал и в обработчик и перед ним вместо оригинального хардкода.
Суть в замене хардкодного прописывания стилей .css("background" ...) на добавление/удаление css-класса

[viktorulyushev]

Степан, это по сути тоже самое что я делал,я же писал что счетчик обнавляется позже чем срабатывает скрипт(он на angular),поэтому работает не корректно,приходится дописывать задержку,а это опять же костыльно,я спрашивал про метод более удобный,может без text() как то можно?

[Степан Крапивин]

viktorulyushev, а где в тегах ангуляр или в самом вопросе?
В тексте вопроса я вычитал: "при 0 картинка одна, а когда больше нуля то другая. Сейчас закостылено, как сделать легче".
В коде видно, что закостылены css-стили, как это разкостылить написал в ответе.

А теперь оказывается проблема в ангуляре, setInterval() и .text()?

[viktorulyushev]

Степан, ну да,я неправильно сформулировал вопрос скорее,просто хотел это сделать с помощью jquery,т.к в ангуляре не очень разбираюсь,смог только счетчик сделать с примера
Вот так

<span class="wishlist-header-block-count" data-wishlist-count data-start-count="@ShoppingCartService.CurrentWishlist.Count" data-ng-bind="wishlistCount.countObj.count">
                @ShoppingCartService.CurrentWishlist.Count
            </span>

[viktorulyushev]

Степан, TheRevan, в общем то нужно было просто спокойно разобраться в вопросе и сделать на самом angular а не костылить

<a class="cart-mini-wishlist-img" href="@Url.AbsoluteRouteUrl("Wishlist")" data-wishlist-count data-ng-class="{'cart-mini-wishlist-img-wish' : wishlistCount.countObj.count > 0 ,'cart-mini-wishlist-img-nowish' : wishlistCount.countObj.count === 0}">