Question

我正在尝试创建一个链接到我们公司数据库的简单配置文件，客户端可以在其中登录并查看其详细信息。基本上，我需要一个在单击编辑按钮时显示“保存”按钮的功能。一旦按下取消，保存按钮就会再次消失。

我有点像菜鸟，所以也许我错过了一些非常简单的事情，为此我道歉。代码和JSFiddle如下：

<HTML>
<button src="#" id="littleButton">Edit Profile</button>

<div id="button-sm">
    <input type="submit" class="ButtonSm" value="Save" id="save_button" name="save_button"></input>
</div>
</HTML>

<script>
$(document).ready(function () {
    var SaveButton = $('#button-sm');
    $(SaveButton).hide();
    $('#littleButton').onclick(function (e) {
        $(SaveButton).animate({
            'opacity': 'toggle'
        });
    });
});
</script>

Answer 1

工作演示： JSFiddle

它应该是click事件而不是onclick你还必须包含你可以从这里下载的jQuery库 jQuery 1.11.1

试试这个：

$(document).ready(function () {
    var SaveButton = $('#button-sm');
      SaveButton.hide();
    $('#littleButton').click(function (e) {
        SaveButton.animate({
            'opacity': 'toggle'
        });
    });
});

有关点击活动的详情，请参阅jQuery click event

Answer 2

您的代码中存在多个问题。首先应该是click而不是onclick。

参见代码：

$(document).ready(function () {
    var SaveButton = $('#button-sm');
    SaveButton.hide();
    $('#littleButton').click(function (e) {
        SaveButton.show();
    });
});

更新了jsFiddle

Answer 3

你做了not include any jquery并且jquery中没有onclick。所以你必须使用click事件

$(document).ready(function () {
    var SaveButton = $('#button-sm');
      SaveButton.hide();
    $('#littleButton').click(function (e) {
        SaveButton.animate({
            'opacity': 'toggle'
        });
    });
});

Updated Demo

Answer 4

点击事件不是onclcik

   $(document).ready(function () {
    var SaveButton = $('#button-sm');
    SaveButton.hide();
    $('#littleButton').on('click',function (e) {
        SaveButton.show();
    });
});

你并没有在你的小提琴中加入js。

DEMO

Answer 5

试试这个：使用click代替onclick，您可以使用show("slow")来显示展示按钮

  $(document).ready(function () {
    var SaveButton = $('#button-sm');
    $(SaveButton).hide();
    $('#littleButton').click(function (e) {
        var buttonLbl = "Edit Profile";
        if($(this).text()!="Cancel")
            buttonLbl="Cancel";
        $(this).text(buttonLbl);
        $(SaveButton).toggle('slow');
    });
 });

<强> Demo

Answer 6

试试这个（对不起我可怕的英语）

JS - 部分

$(document).ready(function () {
    $('#littleButton').on("click", function (e) {
        e.preventDefault();
        $("#button-sm").fadeIn(300);
    });

    $('#cancelButton').on("click", function(e){
        $("#button-sm").fadeOut(300);
    });
});

如果点击“取消”按钮（ID为“cancelButton”），当您点击“编辑”按钮并隐藏按钮时，此jQuery会显示您的“保存”按钮

但你必须首先在你的css中设置这个

CSS部分

#button-sm {
    display:none;
}

JQuery点击显示保存按钮

6 个答案:

Updated Demo