0

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

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

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

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

例子：

例子

我可以处理 AJAX 的东西，但是我不知道如何处理选择/突出显示“机制”。我的基本想法是：有一个points_spent从 0 开始并且每次花费时间点都会增加的变量（duh）。这些框是具有不同 CSS 类（box_spent、box_highlight、box_avaibale）来处理颜色的 div。

一个 JavaScript 正在检查 points_spent 的值，并将 idbox_1为的 div 的类更改box_n为box_spent。

通过单击框触发第二个 JavaScript。它检查点击是否有效（即在橙色或黄色框上）并相应地点亮这些框......

但是我如何用 JS 做到这一点？使用 PHP 执行此操作没有问题，但是对于用户在每次点击后等待是可怕的：/

非常感谢任何帮助！

4

1 回答 1

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;
}
于 2013-08-29T14:37:48.220 回答