将图像添加到 jQuery 脚本中答案

【问题标题】：Adding an image into a jQuery Script将图像添加到 jQuery 脚本中
【发布时间】：2013-11-18 21:22:54
【问题描述】：

我有一个 jquery 脚本，它可以调整一个带有地图的 div 的大小，当它这样做时，被单击以执行操作的 div 的状态会发生变化，并且其中的文本也会发生变化。

初始状态是图像：

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

然后当它点击它时，它会删除图像并说出“关闭”这个词然后当你点击关闭时，它会再次变为“打开”

这里是 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" />');

我通过谷歌搜索找到了这个问题的答案，我知道它非常简单，所以如果有人知道最好的事情，我正在寻找一个提示。

【问题讨论】：

试试 $(this).html(state ? '' : '');

标签： javascript jquery html

【解决方案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);

});
});

【讨论】：

【解决方案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

【讨论】：

【解决方案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" />');

【讨论】：

【解决方案4】：

用JS换图很不专业，
因为这是向服务器发出新图像的新请求，并且需要等待。

我愿意

先预加载所有需要的图片或
创建一个精灵并使用 JS 只需更改 Sprite 背景位置或
创建一个 CSS 复选框，将其隐藏，为 <label> 设置背景图像，并使用 :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;
}

【讨论】：