Question

我想在用户点击链接时为链接添加标记字符，并在第二次单击时将其删除。

这就是我所拥有的：

$('#text a').click(function () {
    $(this).addClass('clicked');
    $(this).text(markerTextChar +  $(this).text());
    $(this).click(function () {
        $(this).removeClass('clicked');
        $(this).text($(this).text().substring(1));
    });
});

点击时会添加标记，但当我点击它以取消选择时，会再添加一次。

你能帮我解决这个问题吗？

Answer 1

使用bind（或click）添加事件处理程序并不会删除旧的事件处理程序。

你可以unbind但不需要这样做。这样做：

$('#text a').click(function () {
   if ($(this).hasClass('clicked')) {
        $(this).removeClass('clicked');
        $(this).text($(this).text().substring(1));
   } else {
      $(this).text(markerTextChar +  $(this).text());
       $(this).addClass('clicked');
   } 
});

demonstration

您也可以使用toggleClass并在css中使用:before添加您的字符，这样会更清晰。

css：

.clicked:before {
    content: "yourmarker";
}

javascript：

$('#text a').click(function () {
   $(this).toggleClass('clicked');
});

demonstration

Answer 2

你必须取消绑定第一次点击事件就像这样做

$('#text a').click(function () {
    $(this).addClass('clicked');
    $(this).text(markerTextChar +  $(this).text());
    $(this).removeAttr('onclick');
    $(this).click(function () {
        $(this).removeClass('clicked');
        $(this).text($(this).text().substring(1));
    });
});

在click（）上添加和删除标记字符

2 个答案: