如何将背景图像更改添加到jQuery

Question

I already have the following jQuery to add an accordion-like feature to my mobile view, making the charts open and close on click:

$('.home-widget h3.widget-title').on('click', function(){

    if(window.matchMedia){
        if(window.matchMedia("only screen and (max-width: 1024px)").matches == true) {
            if($(this).next("div.widget-body").css('display') == "none"){
                $(this).next("div.widget-body").css('display', 'block');
                $(this).parent("div.widget").css('min-height', '648px');
                drawWidgets()
                redrawCharts();
                redrawDatatables();
            }else{
                $(this).next("div.widget-body").css('display', 'none');
                $(this).parent("div.widget").css('min-height', 'auto');
                drawWidgets()
                redrawCharts();
                redrawDatatables();
            }
        }
    }
});

I have a background-image applied to my 'widget-title', which I would like to change from a plus (+) to a minus (-) when the 'widget-body' is displayed. Could anyone tell me where I would add this to the jQuery provided?

CSS is shown here .

Answer 1

This should work if I have understood you.

if($(this).next("div.widget-body").css('display') == "none"){
    $('.widget-title').css('background-image','url(img/1.jpg)');
}else{
    $('.widget-title').css('background-image','url(img/2.jpg)');
}

Answer 2

Do you want it like this?

 if ($(window).width() < 1024 && $('.widget-title').is(":visible")) { $('.widget-title').css('background-image', 'url("https://upload.wikimedia.org/wikipedia/commons/c/ca/Google_Chrome_for_Android_Icon_2016.svg")'); } else { $('.widget-title').css('background-image', 'url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a")'); } 

 .widget-title { height: 200px; width: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="widget-title">Testing</div> 

Just try this snippet when you click on "Run code snippet" before you click on "Expand snippet", close it, "Expant snippet" and then "Run code snippet".

You could also create a new class for the background and just add the class to the div .