jquery - 在jquery中附加图像？

Question

我正在使用 jquery 插件在单击时切换 div。切换链接包含文本“查看”和“关闭”，但我想用图像图标替换该文本

用于此的 Jquery 代码

var defaults = {

        showText: 'View',
        hideText: 'Hide'
  };

 if(options.changeText==1){
         $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);

如何提供图片链接而不是文字？

Answer 1

最简单的方法是切换类。这样它是一行代码......看看这个：

<script>
    $(function () {
        $("#toggleDiv").click(function () {
           $(this).find(".view").toggleClass("close")
        });
    });

</script>
<style>
    .view {
        position:absolute;
        top:0;
        right:0;
        width:30px;
        height:30px;
        background-image:url(../styles/play.png);
        background-size:100% 100%;
        border:1px solid black;
    }
    .close {
        background-image:url(../styles/pause.png);
    }
    #toggleDiv{
        position:relative ;
        display:inline-block;
        border:1px solid #ccc;
        height:200px;
        width:400px;
    }
</style>
<div id="toggleDiv" class="up">
    <div class="view"></div>
</div>

Answer 2

var defaults = {

        show: '<img src="something.jpg"/>View',
        hide: '<img src="something.jpg"/>Hide'
};

if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.html(options.hide) : toggleClick.html(options.show);