javascript - jquery 计算器，具有数组中的可编辑字段

Question

根据之前对另一个问题的回答，下一步是添加迷你计算器...

for (var i = 0; i < animals.length; i++) {
    output.push('<p>' + animals[i] + '<input class="pull-right" value="0" />' + '</p>');

JS Fiddle

我试图用 jquery val() 获取输入值，但没有成功...... 还有其他建议吗？

正如你在 jsfiddle 列表中看到的那样:

猫0

狗0

猴子0

总计:

因此，如果用户将 cat 更新为 2，dog 更新为 1，我想总共显示 3。

谢谢。

编辑: Link to previous questions

Answer 1

请引用fiddle

在文本框更改事件中，请添加如下函数

$(".animals-input").change(function(e) {
  calculator();
});

function calculator()
{
  var result = parseInt(0);
  $(".animals-input").each(function(){
    result = result + parseInt($(this).val());
    $("#total-animals").html("Total:"+result);
  });
}

更新

为了重置总拖动量，您需要在可放置事件中添加我的计算器方法。因此您的代码将如下所示

$(".animals-box").droppable({
    drop: function(event, ui) {
      if ($(".animals-box img").length == 0) {
        $(".animals-box").html("");
      }
      ui.draggable.addClass("dropped");
      var elem = ui.draggable[0].getAttribute('id').split('-')[1];
      animals.splice(animals.indexOf(elem), 1);
      var output = [];
      for (var i = 0; i < animals.length; i++) {
        output.push('<p>' + animals[i] + '<input class="pull-right" value="0" />' + '</p>');
      }
      $('#list').html(output.join(""));
      $(".animals-box").append(ui.draggable);
      $('#list').html(output.join(""));
      calculator(); // Add this method into your existing code you will get the result.
    }
  });
});

这是一个示例 Fiddle 。请检查它是否适合您

希望这对您有帮助。