Question

基本上，我正在运行php while循环，该循环为声明为真的每一行返回一个容器。

容器包含输入字段，您可以想象它们在所有包含的div中都具有相同的类名

关于用户键入/输入，我想使用JavaScript / JQuery获取该特定元素的值和父容器

我的JavaScript看起来像这样：

     $(document).ready(function() {
    function delay(fn, ms) {
        let timer = 0;
        return function(...args) {
            clearTimeout(timer)
            timer = setTimeout(fn.bind(this, ...args), ms || 0)
        }
    }
   $(".quantity").on('keyup input',delay(function(e) {
    console.log('Time elapsed!', this.value);
  var a = parseInt(document.getElementById('quantity').value);
  var b = parseInt(document.getElementById('price').value);
  var Qprice = a * b;
    $.ajax({
        url: 'cartFx.php',
        type: 'post',
        data: { Qprice: Qprice},
        success: function(response) {
            document.getElementById('Qprice').innerHTML = Qprice;
            alert(Qprice);
        }
});
},500));
});

PHP代码

$i = 0;
                while($i < mysqli_num_rows($cart_products)) {
                    $meta = mysqli_fetch_assoc($cart_products);
                    $Pname = $meta['Pname'];
                    $inCartId = $meta['id'];
                    $price = $meta['price'];
                    $Bname = $meta['FromBusiness'];
                    $image = $meta['image'];
                    $code = $meta['code'];

?>
        <div class='cart_body'>
            <input id ='price' name='price' value='<?php echo $price?>'></input>
            <input class="quantity" id ='quantity' type="number" name='quantity' value='<?php 
             echo $quantity?>'></input>
             <p id="Qprice"></p>

        </div>
<?php           
$i= $i + 1;
                }

    }else
    {
?>
        ....
<?php
    }
}
?>

Answer 1

好吧，我找到了一个可行的解决方案。我介绍了一个使用jQuery closest()方法的函数。

   $(".quantity").bind().on('keyup input',function(event) {
    editTask(event.target);
   });
   function editTask(node) { 
  var a = $(node).closest('.cart_body');

  var price  = a.find('.price').val();
  var quantity = a.find('.quantity').val();
  var Qprice = price * quantity;

    $.ajax({
        url: 'cartFx.php',
        type: 'post',
        data: { Qprice: Qprice},
        success: function(response) {
            a.find('.Qprice').text(Qprice);
            alert(Qprice);
        }
});
   }

我还删除了所有id属性，只将classe用作选择器

<div class='cart_body'>
   <input class ='price' name='price' value='<?php echo $price?>'></input>
   <input class="quantity"name='quantity' value='<?php echo $quantity?>'></input>
   <p class="Qprice"></p>
</div>

Answer 2

在您的js中，您有一个$(".quantity").on('keyup input',delay(function(e) {，它表示存在一个类为quantity的元素。但是，在您的php代码中，数量是一个ID，而不是一个类。不确定它在第一个元素上如何工作，但是将id="quantity"更改为class="quantity"，它应该可以工作

Answer 3

听起来您有多个具有相同ID的实例，因此，当您尝试按ID定位时，它仅引用它的第一个实例。

如评论中所述，ID必须是唯一的：

<div id=“unique_a” class=“shared”>div 01</div>

<div id=“unique_b” class=“shared”>div 02</div>

code演示了一种在keyup上引用元素值的方法。

code说明了ID为何必须唯一的原因。

您必须选择一种解决方案，该解决方案可以唯一地标识要定位的元素，例如，通过唯一的id或data属性或类的eq()，或者，正如我刚刚看到的那样，可以通过DOM遍历的jQuery方法从特定元素开始直到找到特定元素为止。

如何从具有相同类名的输入元素中获取特定的输入值

3 个答案: