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


jQuery calculating price if many elements on same page using same IDs?

我在每个产品的一个页面上都有12个这样的表单。它允许某人输入数量并让它计算价格,但还不起作用。新的价格应该取代orderprice类中的价格。

<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; ?>的值,通过将该值乘以$productPrice再乘以$currencyMultiplier来自动计算价格,然后在其前面加上html_entity_decode($currencyAlignCode)

如果页面上只有一个表单,并且我不需要说明<?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个产品执行此操作。我希望每个人的输入都显示在各自的价格框中。

很抱歉,如果不清楚的话,这有点难以解释。

也许是这样的?使用多个选择器或抓取以某个内容开头的选择器。

  <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/

我最终在谷歌上进行了大量搜索并找到了解决方案。

我使用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);

    });
});