C# 標籤的添加和刪除(選擇標籤加樣式)

　　公司一個新項目中,有個功能很吸引人.. 在很多網站上也很常見,雖然標籤是用repeater動態綁定的,可以用到OnItemCommand來做,但是後台這麼做很是複雜而且在選取標籤的時候會重新整理頁面,這個不可取.在網上貌似也沒相關的資料,這裡我用JS做了這個功能,現在拿出來給大家分享下. 也希望大家能贊下我,多關注下我~

 

再次點擊 Darren標籤的時候,圖如下

這裡綁定的標籤,我用到一個隨機顏色方法,JS我寫的很全面,點擊下面的標籤上面文字框添加這個標籤的值,並且標籤上加樣式,當再次添加這個標籤的時候,這個標籤樣式取消,文字框中值去除,因為項目策劃中,需要標籤只能限定在三個上.這裡不管手寫還是自選標籤都被我控制在三個以內.(資料庫中就一個標籤名稱和標籤ID) 好了,廢話不多說,我上代碼了：

前台綁定標籤:

後台標籤隨機顏色的方法:

調用的JS:

//點擊標籤使用的方法
function MarkSelectByID(a, b) {
    var m = document.getElementById("tx_markname");
    var num = 0;
    if (num<=3&&$("#lbl_MarkSelect" + b + "").css("background-color") == "transparent") //沒有選擇
    {
        if (m.value != "") {
            if (m.value.substr(m.value.length - 1) != " ") {
                m.value += " ";
            }
            var s = $("#tx_markname").val().split(" "); //遍曆文字框
            if (s.length < 4) {
                m.value += a + " ";
                $("#lbl_MarkSelect" + b + "").css("background-color", "#f2eada");
            }
        } else {
            m.value += a + " ";
            $("#lbl_MarkSelect" + b + "").css("background-color", "#f2eada");  //選中之後設定為象牙色
        }
        num += 1;
    }
    //已經被選擇的標籤,再次點擊去除樣式,文字框中相對應的值也去除
    else {
        //如果文字框最後沒有給空格,預設給一個空格
        if (m.value.substr(m.value.length - 1) != " ") {
            m.value += " ";
        }
        $("#lbl_MarkSelect" + b + "").css("background-color", "transparent");
        m.value = m.value.replace(a + " ", "");
        num -= 1;
    }
}

var m; //儲存三個標籤時的值來控制超過標籤
//文字框值改變的方法
function MatkChange() {
    var g = $("#tx_markname").val();
    //清楚首位空格
    if (g==" ") {
        $("#tx_markname").val("");
    }
    //不允許輸入2個連續的空格
    if (g.substr(g.length - 1,1) == " "&&g.substr(g.length - 2,1) ==" ") {
        $("#tx_markname").val(g.substr(0,g.length - 1));
    }
    //清空所有樣式
    $(".Cs_Mark").each(function () {
        $(this).css("background-color", "transparent");
    });
    var s = $("#tx_markname").val().split(" "); //遍曆文字框
    var num = s.length - 1;
    if (num == 3) {
        var LastIndex = $("#tx_markname").val().lastIndexOf(" ");
        m = $("#tx_markname").val().substr(0, LastIndex + 1);
        $("#tx_markname").val(m);
    }
    if (num>3) {
        $("#tx_markname").val(m);
    }
    var j = $("#tx_markname").val().split(" ");
    $.each(j, function () {
        var a = this;  //文字框每個元素
        $(".Cs_Mark").each(function () {
            if (a == this.text) {
                $(this).css("background-color", "#f2eada");
            }
        });
    });
}

如果博友覺得哪裡有不懂的可以加我QQ：357253950 來交流~