Question

单击删除按钮时，我想更改第一行行的颜色，然后显示删除确认提醒。我试着这样做：

     /**
     * Removes the selected row.
     */
    $('.link-remove').on('click', function() {

        var parents = $(this).closest('tr');
        parents.css('background-color', '#ff6666'); //this doesn't work
        var result = confirm("Are you sure you want to delete?");


        if (result) {
           //do something on delete
        }
        return false;

    });

但这根本不会改变颜色。

当我尝试在成功删除时更改行的背景颜色时，它可以正常工作：

$.post(
        ajaxurl,
        data,
        function( response )
            {
                //alert(response);
                console.log(response);
                console.log("Success");
                parents.css('background-color', '#ff6666'); //this works
            }
    );

但我想在确认显示之前而不是在删除之后突出显示该行。

我怎样才能达到这个效果？是否有可能在没有setTimeout的情况下实现效果？

修改 HTML：

<div class="some-data">
<input
        class="some_class"
        id="id_of_the_elem"
        name="name_of_the_elem"
        type="text"
        value="some_value" />

<div style="display:inline-block;">
            <a class="link-remove" href="#"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>
</div>
</div>

Answer 1

Settimeout是异步的，并被放入javascript事件循环中。一旦执行所有代码，它将在结束时调用。因此if(result)将无法使用。

 /**
 * Removes the selected row.
 */
$('.link-remove').on('click', function() {

    var parents = $(this).closest('tr');
    parents.css('background-color', '#ff6666');
    var result;
    var secondsDelay = 2; //2 seconds
    setTimeout(function() {
       if(confirm("Are you sure you want to delete?")) {
          // Do your code here
       }
    }, secondsDelay * 1000);

    return false;

});

Answer 2

将setTimeout用于您的html并使用Snippet.I为此目的添加表格。如果我错了，请发表评论。

  $('.link-remove').on('click', function() {

        var parents = $(this).closest('tr');
        parents.css('background-color', '#ff6666'); //this is working :)
        setTimeout(function () {
                 var result = confirm("Are you sure you want to delete?");
             }, 500);
                  

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><td>
<div class="some-data">
<input
        class="some_class"
        id="id_of_the_elem"
        name="name_of_the_elem"
        type="text"
        value="some_value" />

<div style="display:inline-block;">
            <a class="link-remove" href="#">123<i class="fa fa-minus-circle" aria-hidden="true"></i></a>
</div>
</div>
</td>
</tr>
</table>

在显示删除警报之前更改行的颜色

2 个答案: