JavaScript 在单击时更改 div "array"的颜色？

Question

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

1. 点数显示为框数组( float 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;
}