What is the best way to write a script for changing a picture from a quantity?

Question

JavaScript

There is a wish counter, each product has a button to add to the wish list, when you click on this button, the counter increases or decreases, I need the picture to be one when the counter is 0, and when it is more than zero, it’s different, I had to somehow harden it up, is it possible was it easier to do?

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);
            });

at what I had to add a delay, because when you click, the value is still old

Answer 1

Do it with styles and in the code add only the class for the block.

.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");
}
// и так далее...