如何在 javascript 中动态设置项目的数量

Question

我正在尝试在我的网站上集成一个支付网关。这是我的代码

products.php

<div class='row footer'>
 <div class='col-5 col-lg-5'>
    <button class='btn btn-action kkiapay-button' 
      amount-price='" . $row['price'] . "' 
      onclick='openKkiapayWidget()'>" . $row['action'] . "
    </button>
 </div>
 <div class='col-7 col-lg-7 price'>
    <span>XOF " . number_format($row['price']) . "</span>
 </div>
</div>

main.js

openKkiapayWidget({
    amount:"50000",
    position:"center",
    callback:"",
    theme:"red",
    key:"< my-api-key >"
});

现在的问题是产品很多，价格不一；但在这里我只能放置一个静态数量 (50000)，它在单击操作按钮时适用于所有产品。如果产品价格不同，有什么方法可以动态获取产品价格并将其设置在我的函数中？

我试过了，但没用

var price = $(this).amount("price");
openKkiapayWidget({
    amount:""+price+"",
    position:"center",
    callback:"",
    theme:"red",
    key:"<my-api-key>"
});

Answer 1

将元素作为参数传递给“新”函数以在调用小部件之前处理价格。可以在 onclick 函数调用的括号之间使用 this 来完成。然后您将能够从 amount-price 属性中检索价格。

<div class='row footer'>
 <div class='col-5 col-lg-5'>
    <button class='btn btn-action kkiapay-button' 
      amount-price='" . $row['price'] . "' 
      onclick='openKkiapayWidgetWithPrice(this)'>" . $row['action'] . "
    </button>
 </div>
 <div class='col-7 col-lg-7 price'>
    <span>XOF " . number_format($row['price']) . "</span>
 </div>
</div>

function openKkiapayWidgetWithPrice(button)
  let price = button.getAttribute("amount-price");
  
  // The call to your widget
  openKkiapayWidget({
      amount: price,
      position: "center",
      callback: "",
      theme: "red",
      key: "< my-api-key >"
  });
}

如果 amount-price 包含当前符号，您必须将其删除。

如何在 javascript 中动态设置项目的数量

How to set amount of an item dynamically in javascript

javascript

php

payment-gateway