Question

我有一个现在使用按钮的jQuery脚本。我希望“按钮”是一行文字，上面写着“更多”而不是输入类型的按钮。

现在我的按钮是

<input type="button" value="Show all" id="showAll" />

我的jQuery是

$(window).ready( function() {
  $("#showAll").click(function () {
    $("#next40").slideDown(500);
    $(this).hide();
  });

  $("#hide").click(function () {
    $("#next40").slideUp(500, function () {
      $("#showAll").show();
    });
  });
});

Answer 1

将输入按钮包裹在div或其他容器中，然后使用jQuery html()功能将该按钮替换为您的文本。

HTML：

<div id="toReplace">
    <input type="button" value="Show all" id="showAll" />
</div>

jQuery：

$("#showAll").click(function () {
   $("#next40").slideDown(500);
   $(this).parent().html("More");
});

Answer 2

将HTML转换为跨度而不是输入，一切都应该有效：

<span id="showAll">More...</span>

Answer 3

<强> HTML

<div id="more">More</div>

<强> jquery的

$('#more').click(function(){
    alert('hi');
});

我想这就是你所需要的。这是一个fiddle链接

Answer 4

您只需更改按钮的文字：

$("#showAll").attr("value","More");

并设置一个类

$("#showAll").addClass("more");

并添加一些css以设置按钮的特殊样式，以将其显示为简单文本

.more{
    border:0px;
    background-color:rgba(0,0,0,0);
    ....
}

Answer 5

以下任何一种情况都可以：

<a href="" id=showAll">More</a>

或

<span id=showAll">More</span >

然后：

$(window).ready( function() {

    $("#showAll").click(function (e) {

        e.preventDefault(); // this is required if you're using an anchor element: <a>

        $("#next40").slideDown(500);
        $(this).hide();
    });

    $("#hide").click(function () {
    $("#next40").slideUp(500, function () {
        $("#showAll").show();
    });

});

如果您不阻止执行默认事件处理程序（使用锚元素时），页面将刷新。

Answer 6

您可以使用以下内容：

$("#showAll").parent().append("<span>More</span>");

将按钮更改为文本按钮

6 个答案: