php - Ajax 。如何取消第二次点击？

Question

我有以下ajax脚本

$(document).ready(function(){
    $(".ver").click(function(event){
    var pulsado = $(this).data("dnipass"); 
    alert(pulsado);
    event.preventDefault();
    var prueba ;
    $.ajax({
        type: 'POST',
        url: 'adminVerLineas.php',
        data: {
            dni:$(this).data("dnipass"),
        },
        success: (data) => {
            alert(data); 
            $(this).closest('.form-group').next('.userInfo').append(data); 
        }

    });    

});
})

它在这个 html 代码中发布数据

<?php if($usuarios[$i]["IdRol"] == '2'){ ?>
                                <tr>
                                    <td colspan="2">
                                    <!-- -->
                                            <!-- Button -->
                                            <div class="form-group">
                                              <label class="col-md-4 control-label" for="ver"></label>
                                              <div class="col-md-4">
                                                <button data-dnipass="<?= $dni?>" class="ver" name="ver" class="btn btn-primary">Ver líneas</button>
                                              </div>
                                            </div>   
                                        <table id ="<?= $i?>" class="table userInfo" data-formpost="<?= $dni?>"></table> 
                                    </td>

                                </tr>

                            <?php } ?>

如何在第二次点击时删除数据？ ，然后在第三次再次发布，第四次删除......等等......

编辑:使用 ramraider 代码的进展

$(document).ready(function(){
$(".ver").click(function(event){
var pulsado = $(this).data("dnipass");
state = $(this).closest('.form-group').next('.userInfo').data("state"); //always picking 0, instead of the new generated 1
console.log(state);
state = 1-parseInt(state);

alert(pulsado);
event.preventDefault();
var prueba ;
$.ajax({
    type: 'POST',
    url: 'adminVerLineas.php',
    data: {
        dni:$(this).data("dnipass"),
    },
    success: (data) => {


         switch( state  ){
                case 1:
                    $(this).closest('.form-group').next('.userInfo').append( data );
                    $(this).closest('.form-group').next('.userInfo').attr("data-state","1");

                break;
                case 0:
                    $(this).closest('.form-group').next('.userInfo').remove();
                    $(this).closest('.form-group').next('.userInfo').attr("data-state","0");
                break;
            }

    }

});    

这是我的数据状态标签在没有点击时的样子

<table id="0" class="table userInfo" data-formpost="12345678B" data-state="0"></table>

这是第一次点击时的样子

<table id="0" class="table userInfo" data-formpost="12345678B" data-state="1"></table>

这是第二次点击和所有下一次点击的样子

<table id="0" class="table userInfo" data-formpost="12345678B" data-state="1"></table>

它基本上停止了变化，但我不确定为什么，似乎 state = $(this).closest('.form-group').next('.userInfo').data("state") ; 开始总是选择 0，而不是新生成的 1

编辑 2:

Ramraiders 建议的答案正常工作，我错过了数据状态已移至按钮

Answer 1

您可以设置一个在 1 和 0 之间切换的 dataset 属性(在按钮上)——然后可以使用该值在您的 ajax 函数中派生逻辑。例如，设置 data-state=0，然后在 click 处理程序中切换它的值，并在回调中测试该值

<button data-dnipass='<?php echo $dni;?>' data-state=0 class="ver" name="ver" class="btn btn-primary">Ver líneas</button>
<!-- note the data-state attribute that will be toggled! -->


$(document).ready(function(){
    $( ".ver" ).click( function(event){

        event.preventDefault();
        event.target.dataset.state = 1 - event.target.dataset.state;
        var pulsado = $(this).data("dnipass"); 

        $.ajax({
            type: 'POST',
            url: 'adminVerLineas.php',
            data: {
                dni:pulsado
            },
            success: (data) => {
                switch( parseInt( event.target.dataset.state ) ){
                    case 1:
                        $(this).closest('.form-group').next('.userInfo').append( data ); 
                    break;
                    case 0:
                        /* delete */
                    break;
                }

            }
        });
    });
})

我不使用 jQuery，所以我完全不熟悉它的语法或复杂性，但这似乎可以满足您的需求。我已将其整合到一个工作演示中 - 显然您看到的一些代码是 mickey mouse 但应该给出了想法。

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();
        echo "gigantic mouse strangles elephant";
        exit();
    }
?>

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>jQuery-toggle append/delete</title>
        <script src='//code.jquery.com/jquery-latest.js'></script>
        <script>
            $(document).ready(function(){
                $( ".ver" ).click( function(event){

                    event.preventDefault();
                    event.target.dataset.state = 1 - event.target.dataset.state;
                    var pulsado = $(this).data("dnipass"); 

                    $.ajax({
                        type: 'POST',
                        url: location.href, //'adminVerLineas.php',
                        data: {
                            dni:pulsado
                        },
                        success: (data) => {
                            switch( parseInt( event.target.dataset.state ) ){
                                case 1:
                                    $(this).closest('.form-group').next('.userInfo').append( data ); 
                                break;
                                case 0:
                                    /* delete */
                                    $(this).closest('.form-group').next('.userInfo').text('');
                                    /* or, slightly better IMO */
                                    // $(this).closest('.form-group').next('.userInfo').html('<tr><td></td></tr>');
                                break;
                            }

                        }
                    });
                });
            })
        </script>
    </head>
    <body>
        <table>


            <tr>
                <td colspan="2">

                    <div class="form-group">
                        <label class="col-md-4 control-label" for="ver"></label>
                        <div class="col-md-4">
                            <button data-state=0 data-dnipass="BANANA APPLE ORANGE STRAWBERRY" class="ver" name="ver" class="btn btn-primary">Ver líneas</button>
                        </div>
                    </div>   
                    <table id ="XYZABC123" class="table userInfo" data-formpost="BANANA APPLE ORANGE STRAWBERRY"></table> 
                </td>
            </tr>


        </table>
    </body>
</html>