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

Question

我已经有以下 jQuery 来向我的移动 View 添加类似 Accordion 的功能，使图表在单击时打开和关闭:

$('.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();
            }
        }
    }
});

我有一个背景图像应用于我的“小部件标题”，我想在显示“小部件主体”时将其从加号 (+) 更改为减号 (-)。谁能告诉我在哪里将其添加到提供的 jQuery 中？

CSS 显示 here .

Answer 1

你想要这样吗？

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>

只需在单击“运行代码片段”时尝试此代码片段，然后单击“扩展代码片段”，关闭它，“扩展代码片段”，然后单击“运行代码片段”。

您还可以为背景创建一个新的class，然后将class添加到div。