0

ユーザーがリンクをクリックしたときにマーカー文字を追加し、2回目にクリックしたときに削除したいと思います。

これが私が持っているものです：

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

マーカーはクリックすると追加されますが、クリックして選択を解除すると、もう一度マーカーが追加されます。

それを修正するのを手伝ってもらえますか？

4

2 に答える 2

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を使用:beforeし、cssでcharを追加することもできます。これは、はるかにクリーンです。

css：

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

javascript：

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

デモンストレーション

于 2012-10-16T11:08:50.083 に答える
0

ファーストクリックイベントのバインドを解除する必要がありますこのようにします

$('#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));
    });
});
于 2012-10-16T11:09:01.630 に答える