Toggle（）Jquery问题

Question

我有多个步骤让用户改变主意删除记录。在第一步中，用户有两个选择＆＃39;取消退出＆＃39;退出页面或继续＆＃39;删除＆＃39;。在步骤2中，当用户选择删除＆＃39;记录;我想要隐藏＆＃39;取消退出＆＃39;按钮，只显示＆＃39;确认＆＃39;和＆＃39;取消删除＆＃39;。如何隐藏＆＃39;取消退出＆＃39;在第2步？ 以下是示例jsfiddle

for letter in string

<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>

Answer 1

只需添加以下内容：

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

Answer 2

我认为这是切换“取消退出”按钮的有效方式。只需将.cancel或其他类添加到要用于切换“取消退出”按钮状态的按钮，然后将以下代码添加到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>

Answer 3

改变这个：

$("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函数合并为一个，但我通常将这些类型的函数分开，假设它们可以在其他代码区域中独立使用。