Question

我的JS正在努力根据用户对商品数量的输入更新总项目成本。但我现在的＆＃34; onclick＆＃34;要求我传递一个索引位置来计算给定的行。

我希望能够一次性更新所有行项目总计（基于用户的输入数量）。我可以在下面的现有updatePriceByProduct函数中执行此操作（可能使用for循环迭代所有行）吗？我不确定从哪里开始。

HTML

<div class="item-info-container">

      <div class="page-header">
          <h1>Iron <br> Merchandising Shop</h1>

      </div>

        <div class="item-row">

            <div class="item-name"> <span> IronBubble-head </span>  </div>
            <div class="item-cost"> 25.00  </div>
            <div class="item-quantity"> QTY

              <input class="input-quantity">


            </div>
            <div class="item-total-price"> 0.00 </div>
            <div class="item-delete">  <button class="delete-button">Delete</button>  </div>

        </div>

        <div class="item-row">

          <div class="item-name">  <span> IronShirt </span>  </div>
          <div class="item-cost">  15.00  </div>
          <div class="item-quantity">

            <span> QTY
                <input class="input-quantity" type="text">
            </span>

          </div>
          <div class="item-total-price"> 0.00 </div>
          <div class="item-delete">  <button class="delete-        button">Delete</button>  </div>


        </div>

    <div class="calculator">
          <button class="calculate-button" onclick="updatePriceByProduct([0])"> Calculate Prices </button>
        </div>


</div>
</div>

Javascript

function getPriceByProduct(index){

    var stringPrice = document.getElementsByClassName("item-cost")[index].innerHTML;   //Currently getting span id, not all elements
    var numberPrice = Number(stringPrice);

    return numberPrice;

}


function createQuantityInput(index){

    var quantity = document.getElementsByClassName("input-quantity")[index].value;      //retrieve quantity of item from form
    return quantity;
}




function updatePriceByProduct(index){

    var updatedPrice =  getPriceByProduct(index) * createQuantityInput(index);
    var itemTotal = document.getElementsByClassName("item-total-price")[index].textContent = updatedPrice;


    return itemTotal;

}

Answer 1

我添加了一个用总计更新的总计div。我还从其中一个项目中删除了一个跨度，因为它导航到每个项目的价格不同，这使得两个项目都难以使用相同的功能。

我从按钮中删除了该功能，而是将正在使用的元素与eventListener一起分组，以便按钮上的click事件。

单击该按钮时，将使用map迭代items数组对象，这将生成一个新数组，该数组将填充单个产品总数。 calculateTotals函数接收一个项目行并拉出该行的价格和数量，找到该产品，将其设置为该项目的总数并返回要放入价格数组中的价格。然后使用价格数组计算calculateTotal中的总数。

只要不更改每个项目行的html结构，此方法将允许您添加越来越多的项目，而不必更改功能。

HTML：

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    let touchPoint = touches.first! as UITouch
    let screenSize = cameraView.bounds.size
    let focusPoint = CGPoint(x: touchPoint.location(in: cameraView).y / screenSize.height, y: 1.0 - touchPoint.location(in: cameraView).x / screenSize.width)

    if let device = captureDevice {
        do {
            try device.lockForConfiguration()
            if device.isFocusPointOfInterestSupported {
                device.focusPointOfInterest = focusPoint
                device.focusMode = AVCaptureFocusMode.autoFocus
            }
            if device.isExposurePointOfInterestSupported {
                device.exposurePointOfInterest = focusPoint
                device.exposureMode = AVCaptureExposureMode.autoExpose
            }
            device.unlockForConfiguration()

        } catch {
            // Handle errors here
        }
    }
}

使用Javascript：

<div class="page-header">
  <h1>Iron <br> Merchandising Shop</h1>

</div>

<div class="item-row">

  <div class="item-name"> <span> IronBubble-head </span>  </div>
  <div class="item-cost"> 25.00  </div>
  <div class="item-quantity"> QTY

    <input class="input-quantity">


  </div>
  <div class="item-total-price"> 0.00 </div>
  <div class="item-delete">  <button class="delete-button">Delete</button>  </div>

</div>

<div class="item-row">

  <div class="item-name">  <span> IronShirt </span>  </div>
  <div class="item-cost">  15.00  </div>
  <div class="item-quantity">
    QTY
    <input class="input-quantity" type="text">

  </div>
  <div class="item-total-price"> 0.00 </div>
  <div class="item-delete">  <button class="delete-        button">Delete</button>  </div>


</div>

<div class="calculator">
  <button class="calculate-button"> Calculate Prices </button>
</div>
<div class="total">
  Grand Total: <span></span>
</div>

如何使用一个按钮一次计算多个输入？

HTML

Javascript

1 个答案: