2

私のコードは、ユーザーが最大 5 つのタグを選択できるようにし、タグを表示して数を数えます。

$(document).ready(function(e) {

    var tagname = "";
    var count = 0;  

    $(".tagchoose").click(function(){ 
        count++;
        if(count < 6) {
        $("#tagselectshow").html("Tags Selected: " + count + " tags selected");
        tagname = "<span class='selectedtg'>" + $(this).html() + "</span> / ";
        $("#displaythetags").append(tagname);
        }
    });

    $("#deletetags").click(function(){ 
        count = 0;  
        tagname = "";

        $("#tagselectshow").html("Tags Selected: " + count + " tags selected");
        $("#displaythetags").html(tagname); 
    });

});

残念ながら、現時点では、コードは重複タグの選択を制限していません。ユーザーが同じタグを選択できないように制限を追加したいと思います。

4

2 に答える 2

1

選択したタグを配列（タグ）に保持し、ユーザーがタグを追加するときに、アイテムが配列にないことを確認できます。

$(document).ready(function(e) {

    var tagname = "";
    var count = 0;
    var tags = [];
    var thisHTML = $(this).html();

    $(".tagchoose").click(function() {
        count++;
        if ($.inArray(thisHTML, tags) == -1){
        if (count < 6) {
            $("#tagselectshow").html("Tags Selected: " + count + " tags selected");
            tagname = "<span class='selectedtg'>" + thisHTML + "</span> / ";
            $("#displaythetags").append(tagname);
            tags.push(thisHTML);
        }
        }else{
          alert('Tag already chosen');            
        }
    });
    ....
于 2012-11-05T18:24:31.670 に答える
0

選択した要素に選択したクラスを追加してから、ロジックを追加します。

$(document).ready(function(e) {

    var tagname = "";
    var count = 0;

    $(".tagchoose").click(function() {
        var $this = $(this);
        if ($this.hasClass('selected')) {
            $this.removeClass('selected');
        }
        else {
            $this.addClass('selected');
            count++;
            if (count < 6) {
                $("#tagselectshow").html("Tags Selected: " + count + " tags selected");
                tagname = "<span class='selectedtg'>" + $(this).html() + "</span> / ";
                $("#displaythetags").append(tagname);
            }
        }

    });

    $("#deletetags").click(function() {
        count = 0;
        tagname = "";

        $("#tagselectshow").html("Tags Selected: " + count + " tags selected");
        $("#displaythetags").html(tagname);
    });

});​
于 2012-11-05T18:16:19.460 に答える