Question

我已经有以下jQuery为我的移动视图添加类似手风琴的功能，使图表在点击时打开和关闭：

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

我有一个背景图片应用于我的小部件标题＆＃39;，当我想要在＆＃39; widget-body＆时将其从加号（+）更改为减号（ - ）＃39;被展示。谁能告诉我在哪里将它添加到提供的jQuery中？

CSS显示为here。

Answer 1

如果我了解你，这应该有用。

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

你想要这样吗？

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>

在点击“展开代码段”，关闭它，“Expant代码段”然后“运行代码段”之前单击“运行代码段”时，只需尝试此代码段。

您还可以为class创建新的background，然后将class添加到div。

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

2 个答案: