4

SOと同じようにタグ付けシステムを作成しようとしています。タグを追加しましたが、削除したいと思います。

私の質問：

  • 追加されたタグを削除するにはどうすればよいですか?
  • 十字ボタン(スパン)をSOタグ付けシステムと同じにするにはどうすればよいですか?

SOタグ付け

var tags = [];
$("#textBox").keypress(function (e) {
    if (e.which === 13) {
        $(".target").append("<a href='#' class='tag' >"  + this.value+'<span class="cross" onclick="remove_tag()">X</span>'+ "</a>");

        function remove_tag(){
        //what to do here?
        }
        tags.push(this.value);
        this.value = "";
    }
});
4

4 に答える 4

2

ここに私の JSFiddle があります: http://jsfiddle.net/Wky2Z/11/

基本的には、.crossクリックされるのを聞いてから、配列から削除して要素を削除します

//enter something in textbox and press enter....
var tags = [];
$("#textBox").keypress(function (e) {
    if (e.which === 13) {
        $(".target").append("<a href='#' class='tag' >"  + this.value+'<span class="cross">X</span>'+ "</a>");


        tags.push(this.value);
        this.value = "";
    }
});

$('body').on('click','.cross',function(){

    tags.splice($(this).parent('a').html(), 1);
    $(this).parent('a').remove();
});

クロスの外観については、CSS スプライトを使用するため、オフ (グレー) とホバー (赤) の 2 つの状態の png または gif または jpeg を作成し、background-positioncss で赤に切り替えることで同じことができます。 :.cross:hover { background-position:0px -20px }

于 2013-08-21T14:35:54.320 に答える
1

完全な jQuery ソリューションの場合、インラインremove_tag関数を削除して jQuery 関数を使用できonます。動的に作成された要素でも機能します。

選択した要素に 1 つ以上のイベントのイベント ハンドラー関数をアタッチします。

ここで、削除された要素の親要素を取得し、 を使用して DOM から削除できますremove。

配列を現在の状況と「同期」するにはgrep、配列からアイテムを削除するために使用できます。removedItemテキストから子を除いた親のテキストのみを取得するために使用される変数に注意してください。

コード：

//enter something in textbox and press enter....
var tags = [];
$(document).ready(function () {

    $('body').on('click', 'span.cross', function () {
        var removedItem = $(this).parent().contents(':not(span)').text();
        $(this).parent().remove();
        tags = $.grep(tags, function (value) {
            return value != removedItem;
        });
    });

    $("#textBox").keypress(function (e) {
        if (e.which === 13) {
            $(".target").append("<a href='#' class='tag' >" + this.value + '<span class="cross">X</span>' + "</a>");

            tags.push(this.value);
            this.value = "";
        }
    });
});

デモ: http://jsfiddle.net/IrvinDominin/pDFnG/

于 2013-08-21T14:35:55.270 に答える