JavaScript在點擊時更改div「數組」的顏色？

Question

我想創建一個問卷，用戶可以將其分配給不同類別的一定數量的點。分配根據用戶而不同。 分配點應以下列方式實現：

1. 點的號碼顯示爲盒的陣列（無論是浮動的div或表TDS什麼是更好的？）。未使用的點以橙色顯示，消耗的點以石灰/綠色顯示。

2. 用戶可以點擊任何橙色框來指示他想要分配的點數。從左至左（幷包括）點擊框的所有橙色框以黃色突出顯示。突出顯示的框的數量存儲在隱藏的表單域中。

3. 用戶現在點擊他想要分配點的類別/元素。通過單擊該元素的元素名稱，來自（2）的數字和其他形式的東西都通過AJAX發送到腳本處理數據庫的東西。 highlightes黃色框現在變成綠色，計數器更新。

例子：

我可以處理AJAX的東西，但我不知道如何處理選擇/高光 「機械師」。我的基本思想是：有一個變量points_spent，從0開始，每增加一個點都會增加（duh）。這些框是具有處理顏色的不同CSS類（box_spent，box_highlight，box_avaibale）的div。

其中一個JavaScript正在檢查points_spent的值，並會將ID爲box_1的div的類更改爲box_n至box_spent。

第二個JavaScript是通過點擊一個框來觸發的。它檢查點擊是否有效（即在橙色或黃色框中）並相應地點亮框...

但是，我如何使用JS做到這一點？我用PHP來做這件事沒有任何問題，但是對於用戶在每次點擊之後等待都是很可怕的：/

非常感謝任何幫助！

Answer 1

你可以這樣做：

$('.box_highlight,.box_available').click(function(e) { 
    $clicked = $(e.target); 

    // Highlight box that was just clicked 
    $clicked.addClass('box_highlight').removeClass('box_available'); 

    // Find all elements to the left that aren't already spent and highlight them. 
    $clicked.prevAll('.box_available').addClass('box_highlight').removeClass('box_available'); 

    // Remove highlight of any boxes to the right 
    $clicked.nextAll('.box_highlight').removeClass('box_highlight').addClass('box_available'); 
}); 

$('.category').click(function(e){ 

    // The container of the clicked category 
    $categoryEl = $(e.target); 

    // Determine which category was clicked. 
    var category = $categoryEl.html(); 
    var points = currentPointValue(); 
    var highlighted = $('#box_container').find('.box_highlight'); 

    $.post({ 
     /* Your ajax options go here */ 
     data: { 
     category: category, 
     points: points 
     }, 
     success: function() { 
      $categoryEl.append(points); 
      $highlighted.removeClass('box_highlight').addClass('box_spent'); 
     } 
    }); 
}); 

var $boxContainer = $('#box_container'); 

function currentPointValue() { 
    $boxContainer.find('.box_highlight').length; 
}