jQuery类切换问题

Question

我有一些列表项。 以下是一些情况：

1. 如果我点击任何列表项，它将被选中并添加一个类.slected
2. 如果我点击另一个列表项，则前一个列表将被取消选择并且新列表将被选中
3. 如果我单击已经选中的列表项，则会取消选择

FIDDLE

那些场景完美无缺。但是当我按下编辑链接时会出现问题。我不想在编辑模式下取消选择。在执行编辑操作期间应保持选中状态。

我如何才能与这3个条件相匹配？我在这做什么错？任何帮助都将节省我的一天。提前致谢。

JS

$("body").on('click', '.list-group-item', function() {  

    if ($(this).hasClass('selected')) {
       $(this).removeClass('selected');
     } else {
      $(".list-group-item").removeClass('selected');
       $(this).addClass('selected');
     }


});

Answer 1

$("body").on('click', '.list-group-item', function(ev) {    
    var target = ev.target; // Topmost clicked element
    if(!$(target).is(".btn")){ // If click wasn't on a button
        $(this).toggleClass('selected');
        $(this).siblings().removeClass('selected');
    }       
});

<强> Fiddle

Answer 2

添加行

event.stopPropagation();

如下：

$(".btn-link").click(function () {
    event.stopPropagation();
    $(this).parent('.view-mode').hide();
    $(this).parent('.view-mode').siblings('.edit-mode').show();
});