jquery - 使用弹出消息确认删除 (jQuery)

Question

我有一个类为 .delete 的按钮 当我点击它时，我想运行一段 jQuery 代码。
首先我想这样做:
$('.pop-up-alert').addClass('clicked');

然后我需要使用 if/else if/else 语句运行一个函数。

1. 如果点击.no-btn，我想这样做:
   $('.pop-up-alert').removeClass('clicked');

2. 否则如果点击了.yes-btn，我想这样做:
   $(.delete).parent().remove();//实际上我只需要删除点击了 .delete 类子项的父项(我需要使用这个不知何故，但我不知道如何)

3. 否则，我将再次应用此代码:
   $('.pop-up-alert').removeClass('clicked');

重点是，如果用户单击删除按钮，他会看到一个弹出窗口，可以确认删除。如果他点击 YES，jQuery 将删除 .delete 父级。如果否，将隐藏弹出窗口(使用 CSS 中的 .clicked 类)。但如果他点击其他地方，弹出窗口无论如何都会被隐藏。

如果我没理解错的话，代码应该是这样的:

$('.delete').click(function() {
    $('.pop-up-alert').addClass('clicked');
    function() {
        if ($('.no-btn').click()) {
            $('.pop-up-alert').removeClass('clicked');
        } else if ($('.yes-btn').click()) {
            $(.delete).parent().remove();
        } else {
            $('.pop-up-alert').removeClass('clicked');          
        };
    };
});

但它不起作用。 请帮忙

Answer 1

你为什么不简化这个？不需要 if { ... } else { ... } 语句。让 jQuery 检测点击事件，看我的演示:

// delete function
$('.delete').click(function() {

  var parent = $(this).parent(); // get parent of delete button
  $('.pop-up-alert').addClass('clicked'); // show the pop-up

  // if user clicks no
  $('.no-btn').click(function() {
    $('.pop-up-alert').removeClass('clicked'); // remove pop-up
  });

  // if user clicks yes
  $('.yes-btn').click(function() {
    parent.remove(); // delete parent
    $('.pop-up-alert').removeClass('clicked'); // hide pop-up
  });
});

.pop-up-alert {
  display: none;
  padding: 1em;
  margin: 1em;
  border: 1px solid black;
}
.pop-up-alert.clicked {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="pop-up-alert">
  Are you sure? <a href="#" class="no-btn">No</a> / <a href="#" class="yes-btn">Yes</a>
</div>

<div id="item1">Item 1 <a href="#" class="delete">Delete</a></div>
<div id="item2">Item 2 <a href="#" class="delete">Delete</a></div>

jsFiddle demo

P.S 您的代码无效，因为这一行:$(.delete).parent().remove(); 应该是:$('.delete')。 parent().remove();