JavaScript点击时更改div“数组”的颜色？

Question

我想创建一个问卷，用户可以将一定数量的积分分配给不同的类别。分配根据用户而不同。 分配点应按以下方式实现：

1. 点数显示为一个框数组（浮动div或表tds。什么更好？）。未使用的点以橙色显示，消耗的点以石灰/绿色显示。

2. 用户可以点击任何橙色框以指示他接下来要分配的点数。从左到上（包括）单击框的所有橙色框都以黄色突出显示。突出显示的框的数量存储在隐藏的表单字段中。

3. 用户现在单击他想要分配点的类别/元素。通过单击元素名称元素，来自（2）的数字和其他表单内容通过AJAX发送到处理数据库内容的脚本。高亮黄色框现在变为绿色，计数器已更新。

示例：



我可以处理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;
}