Toggle() Jquery 问题

Question

我有多个步骤让用户改变主意，不再删除记录。第一步，用户有两个选择 'cancel to exit' 退出页面或继续 'delete'。在步骤2中，当用户选择'delete'条记录时；我想隐藏 'cancel to exit' 按钮，只显示 'confirm' 和 'cancel delete'。如何在步骤 2 中隐藏 'cancel to exit'？这是示例 jsfiddle

<tr>
    <td>
        <input type='button' value='Delete' id='delete' class='button'>
    </td>
    <td>
        <input type='button' value='Cancel to Exit' id='cancel' class='button'>
    </td>
    <td>
        <input type='button' value='Confirm delete' id='deleteconfirm' style='display:none;' class='button confirmationReq'>
    </td>
    <td>
        <input type='button' value='Cancel delete' id='cancel2' style='display:none;' class='button'>
    </td>
</tr>

$("input#cancel").click(function () {
    alert("exit");
});
$("input#delete,input#cancel2").click(function () {
    $("input#delete, input#deleteconfirm, input#cancel2").toggle();
});
$("input#deleteconfirm").click(function () {
    alert("Delete");
});

Answer 1

只需添加如下内容：

$("input#delete").click(function() {
    $("input#cancel").hide();
});

Answer 2

改变这个：

$("input#delete,input#cancel2").click(function () {
    $("input#delete, input#deleteconfirm, input#cancel2").toggle();
});

为此：

function toggleStuff1() {
   $("input#deleteconfirm").toggle();
    $("input#cancel2").toggle();

}

function toggleStuff2() {
   $("input#delete").toggle();
    $("input#cancel").toggle();

}

$("input#delete").click(function() {
   toggleStuff1();
   toggleStuff2();
});

$("input#cancel2").click(function() {
    toggleStuff2();
    toggleStuff1();

});

您可以将 toggleStuff 函数合并为一个，但我通常将这些类型的函数拆分，假设它们可以在其他代码区域中独立使用。

Answer 3

我认为这是切换 "cancel to exit" 按钮的有效方式。只需将 .cancel 或其他 class 添加到要用于切换 "cancel to exit" 按钮状态的按钮，然后将以下代码添加到您的 JS：

$('.cancel').on('click', function() {
    $('#cancel').toggle();
});

请务必查看下面的演示。

$("input#cancel").click(function () {
    alert("exit");
});
$("input#delete,input#cancel2").click(function () {
    $("input#delete, input#deleteconfirm, input#cancel2").toggle();
});
$("input#deleteconfirm").click(function () {
    alert("Delete");
});

$('.cancel').on('click', function() {
    $('#cancel').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr>
    <td>
        <input type='button' value='Delete' id='delete' class='button cancel'>
    </td>
    <td>
        <input type='button' value='Cancel to Exit' id='cancel' class='button'>
    </td>
    <td>
        <input type='button' value='Confirm delete' id='deleteconfirm' style='display:none;' class='button confirmationReq'>
    </td>
    <td>
        <input type='button' value='Cancel delete' id='cancel2' style='display:none;' class='button cancel'>
    </td>
</tr>
</table>

Toggle() Jquery 问题

Toggle() Jquery issue

jquery

togglebutton