Question

我有一个jquery脚本，用于调整div的大小，并在其中执行此操作时，单击以执行操作的div的状态也会发生变化，而文本也会发生变化。

初始状态是图像：

 <div class="menu"><img src="../images/expand.png" width="20px" /></div>

然后点击它时会删除图片并显示“关闭”字样然后当您点击“关闭”时再次更改为“打开”

Heres是jQuery：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(".menu").on('click', function() {
    var state = $(this).data('state');
    if ( state ) {
        $("#googleMap").animate({height: 100 }, 800);
        state = false;
    }else{
        $("#googleMap").animate({height: 300 }, 800);
        state = true;
    }
    $(this).text(state ? 'Close' : 'Open');
    $(this).data('state', state);
});
});//]]>  

</script>

这是我要改变的路线：

$(this).text(state ? 'Close' : 'Open');

这是我失败的尝试：

$(this).text(state ? '<img src="../images/shrink.png" width="20px" />' : '<img src="../images/expand.png" width="20px" />');

我通过谷歌搜索找到了答案，我知道它真的非常简单，所以如果有人知道最好的事情，那就是寻找小费。

Answer 1

试试这个，

if(state)
{
$(this).append('<img src="../images/shrink.png" width="20px" />');
}
else
{
$(this).append('<img src="../images/expand.png" width="20px" />');
}

从技术上讲，.text()将替换该特定标记内的内容。不是Html。为此，您应该使用.append()或.html().

修改后的代码版本

$(window).load(function(){
$(".menu").on('click', function() {
    var state = $(this).data('state');
    if ( state ) {
        $("#googleMap").animate({height: 100 }, 800);
        state = false;
    }else{
        $("#googleMap").animate({height: 300 }, 800);
        state = true;
    }

    $(this)
    .html(state ? '<img src="../images/shrink.png" width="20px" />' :
    '<img src="../images/expand.png" width="20px" />');

    //or maybe
    // $(this).append(state ? '<img src="../images/shrink.png" width="20px" />'
    // : '<img src="../images/expand.png" width="20px" />');

    $(this).data('state', state);

});
});

Answer 2

更改

$(this).text(state ? '<img src="../images/shrink.png" width="20px" />' : '<img src="../images/expand.png" width="20px" />');

到

$(this).append(state ? $('<img src="../images/shrink.png" width="20px" />') : $('<img src="../images/expand.png" width="20px" />'));

参考how append works

Answer 3

$(this).text(state ? '<img src="../images/shrink.png" width="20px" />' : '<img src="../images/expand.png" width="20px" />');

使用html代替下面的文字方法

$(this).html(state ? '<img src="../images/shrink.png" width="20px" />' : '<img src="../images/expand.png" width="20px" />');

Answer 4

用JS改变图像是非常不专业的，
因为它是服务器的新请求以获取新图像，并且有等待时间。

我会

首先预载所有需要的图像或
创建精灵，使用JS只需更改精灵背景位置或
创建一个CSS ckeckbox，隐藏它，为<label>设置bg-image，并使用:checked属性更改标签背景位置，甚至切换gMap视图。

<强> Demo without any JS involved

<input type="checkbox" id="toggleMap"><label for="toggleMap"></label> <div id="gMap"></div>

#toggleMap{ display:none; } #toggleMap + label{ cursor:pointer; display:inline-block; width:15px; height:15px; background:url('http://i.imgur.com/wEVjlgD.gif'); background-position: 0 -15px; } #toggleMap:checked + label{ background-position: 0 0; } #gMap{ background:#eee; width:300px; height:100px; transition:0.3s; } #toggleMap:checked ~ #gMap{ height:400px; }

将图像添加到jQuery脚本中

4 个答案: