jQuery计算价格，如果同一页面上的多个元素使用相同的ID？

Question

每个产品的页面上都有12种这些表格。 它允许某人输入数量并让其计算价格，但尚未生效。 新价格应替换orderprice类div中的价格。

<form action="" method="post">

    <input type="number" id="amount-<?php echo $productId; ?>" class="orderamount" name="amount" value="1" min="1" max="2000" maxlength="4" />
    <input type="hidden" name="product" value="<?php echo $productId; ?>" readonly="readonly" disabled="disabled" />
    <div id="price-<?php echo $productId; ?>" class="orderprice">

        <?php
            echo html_entity_decode($currencyAlignCode) . round($productPrice * $currencyMultiplier, 2);
        ?>

    </div>
    <input type="submit" class="addcart" value="" name="order" /> 
</form>

我想取值的amount-<?php echo $productId; ?> amount-<?php echo $productId; ?> ，并通过将该值乘以$productPrice再乘以$currencyMultiplier自动计算价格，然后在其前面添加html_entity_decode($currencyAlignCode) 。

如果页面上只有1个表单，并且我不需要考虑<?php echo $productId; ?>我知道该怎么做<?php echo $productId; ?> <?php echo $productId; ?> 。 这是我要针对单个表单执行的操作，但是我要针对几个表单执行此操作？ 每个价格只能从相关的输入框中获取数量吗？

$(document).ready(function() {
    $("#amount").bind('click keyup', function(event) {

        var amount = $("#amount").val();
        var productPrice = <?php echo $productPrice; ?>;
        var currencyMultiplier = <?php echo $currencyMultiplier; ?>;
        var currencyCode = <?php echo html_entity_decode($currencyAlignCode); ?>;

        var totalPrice = amount * productPrice * currencyMultiplier;

        $("#price").html('currencyCode' + totalPrice);

    });
});

此代码仅适用于1种产品。 我希望每个输入都显示在相应的价格框中。

抱歉，如果不清楚，那很难解释。

Answer 1

也许是这样的吗？ 使用多个选择器或抓住以某些内容开头的选择器。

  <input type="number" id="amount-<?php echo $productId; ?>" productPrice="<?php echo $productPrice; ?>" ...


$("[id^=amount]").each(function(index){
  $(this).bind("click key up", function(){
    var amount = $(this).val();
    var productPrice = $(this).attr('productPrice');
    ...
  });
});

https://api.jquery.com/each/

http://api.jquery.com/attribute-starts-with-selector/

Answer 2

我最终做了一些广泛的Google搜索，并提出了解决方案。

我使用attr来根据更改后的类获取ID。

$(document).ready(function() {
    $(".orderamount").bind('click keyup', function(event) {



        var productId = $(this).attr('id');
        var setId = productId.substring(7);

        var amount = $('#amount-' + setId).val();
        var productPrice = <?php echo $productPrice; ?>;
        var currencyMultiplier = <?php echo $currencyMultiplier; ?>;
        var currencyCode = <?php echo html_entity_decode($currencyAlignCode); ?>;


        var totalPrice = round(amount * productPrice * currencyMultiplier, 2);

        $('#price-' + setId).html('currencyCode' + totalPrice);


    });
});