Question

我有一个带文字的按钮和一个＆＃34;微调图像＆＃34;。最初的＆＃34;微调图像＆＃34;在显示文本时隐藏，我想在微调器和文本之间切换。

<button id="yu1" class="searchbtn" onclick="return false;">Search<img class="spinner" src="/images/ajax_loader.gif"></button>

我们可以隐藏和显示按钮文字而不更新文字，因为我不想保留文本值本身吗？

Answer 1

如果您可以修改HTML，可以在文本周围添加<span>，然后使用JQuery，您可以使用以下命令切换文本：

$("#yu1 span").hide();
$("#yu1 img").show();

反向方法。

如果您无法在文本周围添加范围，则仍然只能隐藏文本：

$("#yu1").css("font-size","0");

并显示：

$("#yu1").css("font-size","inherit");

<强>更新

改善我的答案，你可以写几个jquery：

$("#yu1").bind("click", function () {    
    $(this).toggleClass("click");
});

还有一些CSS：

button img{
    display: none;
    width:10px; //the width in not mandatory here, it's because the image was very large in the jsfiddle
}

button.click img{
    display:inline;
}

button.click{
    font-size:0;
}

实例： http://jsfiddle.net/11knzmpn/1/

Answer 2

您可以将按钮颜色设置为透明

demo

$("#yu1").on("click", function () {
    $(this).css("color", "transparent");
    $(this).find("img").show();

    $(this).click(function () {
        $(this).css("color", "black");
        $(this).find("img").hide();
    });
});

jQuery隐藏/显示按钮文本

2 个答案: