JQuery点击显示保存按钮答案

【问题标题】：JQuery on click display Save ButtonJQuery点击显示保存按钮
【发布时间】：2014-07-30 12:22:51
【问题描述】：

我正在尝试制作一个链接到我们公司数据库的简单个人资料，客户可以在其中登录并查看他们的详细信息。基本上，我需要一个在单击编辑按钮时显示保存按钮的功能。一旦我按下取消，保存按钮应该会再次消失。

我有点菜鸟，所以也许我错过了一些非常简单的东西，对此我深表歉意。代码和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>

【问题讨论】：

嘿。那么触发器是点击 - jQuery("#id").click(function(e){});如果您使用 jQuery 1.10.1 或更高版本，我建议您使用 jQuery("#id").on("click",function (e){});因为显然他们一直在将代码迁移到“开”/“关”。我对其他触发器有一些问题。所以它是未来的东西

标签： javascript jquery html

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

【讨论】：

谢谢伙计，这很好用。甚至保持了我想要的不透明度。
很高兴它对您有用，如果您得到解决方案How to accept the answer@SydHolmes，请将此答案标记为已接受

【解决方案2】：

有点击事件不是onclcik

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

而且你的小提琴中没有包含 js。

DEMO

【讨论】：

【解决方案3】：

试试这个：使用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

【讨论】：

【解决方案4】：

你做了 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

【讨论】：

【解决方案5】：

您的代码中有几个问题。首先应该是click 而不是onclick。

查看代码：

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

更新jsFiddle

【讨论】：

动画不透明度方法会起作用，看看这个链接jsfiddle.net/65D9C/35

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

当你点击“EDIT”按钮时，这个 jQuery 会显示你的 SAVE 按钮，如果你点击“CANCEL”按钮（id 为“cancelButton”）则隐藏你的按钮

但你必须首先在你的 CSS 中设置它

CSS 部分

#button-sm {
    display:none;
}

【讨论】：