jQuery + PHP Динамически созданный контент

Question

Я работаю над сайтом электронной торговли, и продукты динамически генерируются с помощью цикла foreach, внутри каждого продукта есть параметры продукта, когда выбран вариант продукта. Я предполагаю, что это по цене Обновить.

У меня это работает, однако jQuery обновляет каждый экземпляр цены на странице, а опция выбора работает только для первого созданного элемента. Как добавить/привязать 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

идентификаторы уникальны. Поскольку «выбрать» находится в цикле, у вас есть несколько идентификаторов, которые не помогают. То же самое с ценой. Итак, давайте изменим его немного:

<?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 навигации, чтобы получить price, которое по отношению к выберите , Таким образом, всякий раз, когда изменяется окно выбора, он будет искать элемент next в дереве DOM, который является родным братом, который, если ваш фрагмент кода будет завершен, будет элементом 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>