javascript - 需要切换选定的 div，并增加计数器

Question

我需要允许用户单击一系列 div。他们基本上是选择 x 个元素(每个元素都在一个 div 中)来添加到一个组中。每个元素只能添加一次。但他们也应该能够取消选择元素。

每次选择一个元素时，它的 ID 都会添加到表单字段中，这样我就可以捕获所有选定元素 ID 的逗号分隔列表。

只能选择 x 个元素。因此，我需要保持所选元素的运行计数，并且都停止选择其他元素的能力。当然，如果取消选择所选元素，计数会减少。

我现在所拥有的，将正确的元素 ID 添加到表单字段，并在每次单击时正确地打开和关闭 div 样式。但是，它只是不断将 ID 添加到表单字段。 “x”数量没有限制，并且取消选择元素时不会删除 ID。

任何帮助都会很棒。

这是 html:

    <h3 style="border-top:none;padding-top:0;">Choose <div id="boxQ">3</div> Items for Your Box</h3>
{% set featuredCollection = 'clctn-box-items'|collection %}
{% for product in featuredCollection.products %}
    <div class="row">
        <div class="twelve columns">
            <div class="box-items" id="tag{{ product.id }}" value="{{ product.id }}">
               {{ product.name }} <img class="box-item-thumb" align="right" src="{{ product.images.first.thumbnail('auto', 65)|default('http://placehold.it/100x65') }}"/>
            </div>
        </div>
    </div>
{% endfor %}
<input type="text" id="boxItemIDs" name="box_item_ids" value="">

这是CSS:

.box-items {
    padding: 5px;
    margin: 5px 5px 5px 5px;
    border-left: 4px solid #ff7b01;
    min-height:75px;
    width:100%;
    display:inline-block;
    background-color:#efefef;
    cursor: pointer;
}

.itemClicked {background-color:grey;}

这是 jquery:

//
// Set Selected Item Count - numer of items allowed for this box 
//
var itemCount;
$( function() {
    var urlString = window.location.href;
    var thesplit = urlString.substring(urlString.lastIndexOf("/")+1).split('-');
    itemCount = thesplit[0];

});
//
// Handle Box Item Clicks
//
var count = 0;
$( document ).ready(function() {

    document.getElementById("boxQ").innerHTML = itemCount;

    $('div[id^="tag"]').on('click', function() {  
        var $thisDiv = $( this );
        count++;
        $thisDiv.toggleClass( "itemClicked");
        var ids = $(this).attr('value');
        var resultObj = $("#boxItemIDs");
        var stringToAppend = resultObj.val().length > 0 ? resultObj.val() + "," : "";
        resultObj .val( stringToAppend + ids );


    });


});

这是我为其创建的 fiddle :https://jsfiddle.net/3z1uoL8f/但它不起作用。

Answer 1

我认为这是实现你想要的最简单的方法:

JS:

var maxItems = 3;
$(function () {
    $(".box-items").click(function () {
        if ($(".itemSelected").length >= maxItems) {
            if ($(this).hasClass("itemSelected")) {
                $(this).removeClass("itemSelected");
            }
        } else {
            $(this).toggleClass("itemSelected");
        }
        var ids = "";    
        $(".itemSelected").each(function (index, item) {
          ids += $(item).attr("id")+",";
        });
        //i use slice to remove last comma
        $("#submitMe").val(ids.slice(0,-1));       
    });
});

HTML:

<div class="box-items" id="1">click me</div>
<div class="box-items" id="2">click me</div>
<div class="box-items" id="3">click me</div>
<div class="box-items" id="4">click me</div>
<input id="submitMe" type="text" />

fiddle :here