创建stackoverflow标记系统？ [英] create stackoverflow tagging system?

问题描述

我正在尝试像SO一样创建一个标记系统。
我添加了标签，现在我想删除它们。

I am trying to create a tagging system just like SO has. I have added the tags,now I want to remove them.

MyQuestion：

MyQuestion:

• 如何删除附加的标签？


• 如何使十字按钮（跨度）看起来与SO标记系统中的相同？

SO TAGGING

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

推荐答案

这是我的JSFiddle： http://jsfiddle.net/Wky2Z/11/

Here's my JSFiddle: http://jsfiddle.net/Wky2Z/11/

基本上，听取 .cross 点击，然后从数组中删除和删除元素

Basically, listen on the .cross to be clicked, and then remove from array and delete element

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

至于十字架的外观，SO使用CSS Sprite，所以你也可以这样做制作两种状态的png或gif或jpeg，关闭（灰色）和悬停（红色）并使用css将背景位置切换为红色，例如： .cross：hover {background-position：0px -20px}

As for the look of the cross, SO use a CSS Sprite, so you can do the same by making a png or gif or jpeg of the two states, off(grey) and hover(red) and switch the background-position to red with css eg: .cross:hover { background-position:0px -20px }

这篇关于创建stackoverflow标记系统？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！