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

Question

我想创建一个问卷，其中用户有一定数量的分数，他们可以分配给不同的类别。分配因用户而异。 分配点应通过以下方式实现：

1. 点数显示为一个框数组（浮动 div 或表格 td。哪个更好？）。未使用的点显示为橙色，已使用的点显示为石灰/绿色。

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;
}