在click（）上添加和刪除標記字符

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 ）添加事件處理程序不會刪除舊的事件處理程序。

您可以解除綁定 ，但這不是必需的。 改為這樣做：

$('#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');
   } 
});

示范

---

您可能還使用toggleClass並在CSS中使用:before添加字符，這會更清潔。

css：

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

javascript：

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

示范

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));
    });
});