Question

这个功能运作良好，但有点慢

HTML

<table>
    <tr>
        <td>
            <p><span id="ItemPrice">10</span></p>
        </td>
        <td>
            <input type="number" id="quantity" name="quantity" value="1" min="1" />
        </td>
        <td>
            <p><span id="ItemTotal">0</span></p>
        </td>
    </tr>
</table>

的javascript

function CountItemTotal() {
        $("span#ItemTotal")
            .each(function () {
                $(this).text(
                    +$(this)
                        .closest("tr")
                        .find("#ItemPrice")
                        .text()
                    *
                    +$(this)
                        .closest("tr")
                        .find("#quantity")
                        .val()
                )
                    .fadeOut("fast")
                    .fadeIn("fast");
            });
    }

$("input#quantity").change(function () {
        CountItemTotal();
    });

任何想法如何增加这个功能的运行时间？

“我不知道为什么我收到了这条消息，但它说我必须添加一些额外的文字，因为我的帖子大多数都是代码，无论如何都没关系:)”

Answer 1

为了让您的计算效果更好，您可以进行以下更改。

删除.fadeOut("fast")和.fadeIn("fast")。
将id更改为class，因为您提到需要多次重复这些行。
删除了each()，以便只更新当前行。

见下面的工作示例。

＆＃13;

function CountItemTotal($this) {
  var tr = $this.closest("tr");
  var ItemTotal = tr.find(".ItemTotal");
  var ItemPrice = tr.find(".ItemPrice");
  var quantity = tr.find(".quantity");

  ItemTotal.text(ItemPrice.text() * quantity.val());
}

$("input.quantity").change(function() {
  CountItemTotal($(this));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p><span class="ItemPrice">10</span></p>
    </td>
    <td>
      <input type="number" class="quantity" value="1" min="1" />
    </td>
    <td>
      <p><span class="ItemTotal">0</span></p>
    </td>
  </tr>
  <tr>
    <td>
      <p><span class="ItemPrice">10</span></p>
    </td>
    <td>
      <input type="number" class="quantity" value="1" min="1" />
    </td>
    <td>
      <p><span class="ItemTotal">0</span></p>
    </td>
  </tr>
  <tr>
    <td>
      <p><span class="ItemPrice">10</span></p>
    </td>
    <td>
      <input type="number" class="quantity" value="1" min="1" />
    </td>
    <td>
      <p><span class="ItemTotal">0</span></p>
    </td>
  </tr>
  <tr>
    <td>
      <p><span class="ItemPrice">10</span></p>
    </td>
    <td>
      <input type="number" class="quantity" value="1" min="1" />
    </td>
    <td>
      <p><span class="ItemTotal">0</span></p>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

只是寻求帮助我得到了

此查询会比我发布的第一个更好地应用效果

function CountItemTotal($this) {
 var tr = $this.closest("tr");
 var ItemTotal = tr.find(".ItemTotal");
 var ItemPrice = tr.find(".ItemPrice");
 var quantity = tr.find(".quantity");

ItemTotal.fadeOut(function () {
     $(this).text(ItemPrice.text() * quantity.val()).fadeIn();
  });
}

$("input.quantity").change(function() {
   CountItemTotal($(this));
});

元素淡出，然后输入新值：）

jquery函数的运行时很慢

2 个答案: