需要切換選定的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); 


    }); 


}); 

下面是我爲它創建了一個小提琴：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

我無法用你的小提琴頁面進行測試（由於handlebars（？）模板沒有正確渲染），但有一點重新安排，重命名變量和一些額外的操作，這是我的企圖引導你在正確的道路上：

$('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

這是我對這個問題的看法。我的第一本能感覺這有點臃腫，如果我有更多的時間，可以減少，但希望這會讓你在正確的方向。我也提出了一個小提琴，所以你可以玩它，看看如何一起工作。我希望這有幫助！

小提琴：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++; 
     } 
    } 
});