Question

我正在开发电子商务网站，产品是使用foreach循环动态生成的，每个产品中都有产品选项，当选择产品选项时，我的预期行为是更新价格。

我有这个工作，但是jQuery正在更新页面上的每个价格实例，而select选项仅适用于生成的第一个项目。如何将jQuery添加/绑定到对象/每个产品并根据具体情况进行价格更改？

<?php 
  foreach($items as $item):
    <?php echo $the_name ?>

    <select id="choose">
      foreach($selection as $select):
        <option value="$some_var" data-value="$the_price">$some_var</option>
      endforeach;
    </select>

    <div id="price"><?php echo $the_price ?></div>
  endforeach;
?>

<script type="text/javascript">
  jQuery('#choose').change(function (event) {
    jQuery('#price').html(jQuery('#choose option:selected').data('value'));
  }).change();
</script>

工作代码

玩了一段时间后，并考虑到下面的其他评论，这段代码有效。

<script type="text/javascript">
  jQuery('.choose').change(function (event) {
    var $t = jQuery(this);
    var price = $t.find('option:selected').data('value');
    $t.parents('form').find('.price').html(price);
  }).change();
</script>

Answer 1

ID是独一无二的。因为“选择”是一个循环，你有多个选择ID，这没有帮助。与“价格”相同。所以，让我们稍微改变一下：

<?php 
    foreach($items as $item):
        <?php echo $the_name ?>
        <select class="choose">
            foreach($selection as $select):
            <option value="$some_var" data-value="$the_price">$some_var</option>
            endforeach;
        </select>
        <div class="price"><?php echo $the_price ?></div>
    endforeach;
?>
<script type="text/javascript">
    jQuery('.choose').change(function (event) {
        jQuery(this).next().html(jQuery(this).data('value'));
    }).change();
</script>

说明：

由于您可以拥有多个choose，因此您需要进行一些DOM导航以获取相对于select的price。因此，每当更改选择框时，它将在DOM树中查找作为兄弟的next元素，如果您的代码片段已完成将是price元素，然后更新html达到那个价值。但有一点想法 - 您可能希望使用text而不是html，除非您的价格中包含HTML。此外，当你在一个事件中（除非你已经做了一些特殊的事情来重新绑定范围），在jQuery this中将引用事件触发的元素。因此，jQuery(this)将返回对已更改元素的jQuery引用。

Answer 2

<?php 

      foreach($items as $item):

      <?php echo $the_name ?>

      <select class="choose">
         foreach($selection as $select):

         <option value="$some_var" data-value="$the_price">$some_var</option>

         endforeach;
       </select>

       <div class="price"><?php echo $the_price ?></div>

      endforeach;



    ?>
    <script type="text/javascript">
       jQuery('.choose').change(function (event) {
         jQuery$(this).parent().next(".price").html(jQuery('#choose option:selected').data('value'));
       }).change();
    </script>

jQuery + PHP动态创建的内容

2 个答案: