Нужно переключать выбранные divs и приращение счетчика

Question

Мне нужно разрешить пользователям нажимать на серию div. Они в основном выбирают x количество элементов (каждый элемент находится в div) для добавления в группу. Каждый элемент может быть добавлен только один раз. Но они также должны иметь возможность отменить выбор предметов.

Каждый раз, когда элемент выбран, его идентификатор добавляется в поле формы, поэтому я могу зафиксировать список всех выделенных элементов с разделителями-запятыми.

Только x количество элементов может быть выбрано. Поэтому мне нужно сохранить количество подсчётов, выбранных в списке, и одновременно остановить возможность выбора дополнительных элементов. Конечно, если выбранный элемент не выбран, счет будет увеличиваться.

То, что у меня есть, добавляет правильный идентификатор элемента в поле формы и правильно включает и отключает стиль div при каждом нажатии. Однако он просто добавляет идентификаторы в поле формы. Без ограничений для номера «x» и без удаления идентификаторов, когда элемент не выбран.

Любая помощь была бы удивительным соусом.

Вот 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); 


    }); 


}); 

Вот скрипку я создал для него: 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" /> 

скрипку : here

Answer 2

Я не смог проверить его на вашей странице скрипта (из-за неправильного отображения шаблона руля (?)), Но с небольшой перестановкой, переименованием переменных и несколькими дополнительными операциями, вот моя попытка управлять вами по правому пути:

$('div[id^="tag"]').on('click', function() { 
    var $thisDiv = $(this); 
    var resultObj = $("#boxItemIDs"); 
    var id = $thisDiv.attr('value'); 
    var selectedIds = resultObj.val().split(','); 
    var idIndex = selectedIds.indexOf(id); 

    // item is currently selected 
    if (idIndex >= 0) { 
     selectedIds.splice(idIndex, 1); 
    } 
    else { 
     selectedIds.push(id); 
    } 
    count = selectedIds.length; 

    $thisDiv.toggleClass("itemClicked"); 
    resultObj.val(selectedIds.join(",")); 
}); 

Answer 3

Вот моя проблема. Мой первый инстинкт чувствует, что это немного раздуто и может быть уменьшено, если у меня будет больше времени, но, надеюсь, это приведет вас в правильном направлении. Я тоже выставляю скрипку, чтобы вы могли поиграть с ней и посмотреть, как все работает вместе. Надеюсь, это поможет!

Fiddle: https://jsfiddle.net/7pw9uz3o/1/

// Set Selected Item Count - arbitrary number for DEMO purposes 
var itemCount = 3; 
var count = 0; 
var items= []; 

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

$('div[id^="tag"]').on('click', function() { 

    var $thisDiv = $(this); 
    var ids = $(this).attr('value'); 
    var resultObj = $("#boxItemIDs"); 

    // If the row has been clicked already we need to remove it 
    if ($thisDiv.hasClass("itemClicked")) 
    { 
     $thisDiv.removeClass("itemClicked"); 

     var index = items.indexOf(ids); 
     if (index > -1) { 
      items.splice(index, 1); 
     } 
     resultObj.val(items.join(',')); 
     count--; 
    } 
    else 
    { 
     // If count equals itemCount throw an error 
     if (count === itemCount) 
     { 
      console.log("Too many items in the box yo!"); 
      // This would be a great place to put an error message... 
     } 

     // Otherwise we need to continue and add it. 
     else 
     { 
      $thisDiv.addClass("itemClicked"); 
      items.push(ids); 
      resultObj.val(items.join(',')); 
      count++; 
     } 
    } 
});