Блог

Главная - Вопросы по программированию - Увеличение аргумента функции после jQuery .clone()

Увеличение аргумента функции после jQuery .clone()

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть php-скрипт, который выводит значения цен для текущей страницы в таблице. Каждая строка представляет собой разную цену за 1 товар и может быть отредактирована.

 <table border="0" cellpadding="5" cellspacing="0" class="content" id="page_prices">
<thead>
  <tr>
      <th>description</th>
        <th>sku</th>
        <th>single</th>
        <th>quantity</th>
        <th>price</th>
        <th>currency</th>
        <th width="25"></th>
</thead>
<tbody> 

<?php
for($i=0; $i<$count_prices; $i  )
{
  echo "<tr>";
  echo "<td><input name="price_description[]" type="text" id="price_description" size="20" value="".$prices[$i]['description']."">";
  echo "<td><input name="price_code[]" type="text" id="price_code" size="5" value="".$prices[$i]['code']."">";
  echo "<td><input name="price_pcs[]" type="text" id="price_pcs" size="5" value="".$prices[$i]['pcs']."">";
  echo "<td><input name="price_qty[]" type="text" id="price_qty" size="5" value="".$prices[$i]['qty']."">";
  echo "<td><input name="price_value[]" type="text" id="price_value" size="10" maxlength="10" value="".$prices[$i]['price_value']."" onChange = "CalcSale(this.form, $i);">";
  
  echo "<td><input name="otstupka_pr[]" type="text" id="otstupka_pr" size="5" value="0" onChange = "CalcPerc(this.form, $i);">";
  echo "<td><input name="regular_price[]" type="text" id="regular_price" size="5" value="".$prices[$i]['real_price']."" onChange = "CalcSale(this.form, $i);">";
  echo "<td><input name="valid_to[]" type="date" id="valid_to" size="10" maxlength="10" value="".$prices[$i]['valid_to']."">";
  echo "<td>";
  echo "</tr>";
}

?>
  </tbody>
<tfoot>
    <tr><td colspan="7"> <a href="javascript: void(0)" id="add_page_price" class="add">Add price</a>
  </tfoot>
  </table>

Есть 2 функции, которые вычисляют на основе пользовательского ввода: CalcSale и CalcPerc . Каждый из них использует значение ввода и счетчика $i для вычисления отдельно для каждой строки. Когда пользователь решает добавить новую цену и нажимает на add_page_price последнюю строку, клонируется с:

 $j("#add_page_price").click(function(){
 $j("#page_prices tbody tr:last").clone().appendTo("#page_prices tbody");
})

Вопрос в том, как я могу клонировать последнюю строку и увеличивать аргумент $i в onChange = "CalcSale(this.form, $i);"

Комментарии:

1. Ваш HTML неверен. Вы не можете использовать одно и то же id для более чем одного элемента в DOM. Если вы хотите идентифицировать несколько элементов, используйте класс или data-* атрибут.

2. Кроме того, в вашем PHP вы можете использовать ' для разграничения строки, чтобы вы могли использовать " ее внутри, не используя escape-символ.

Ответ №1:

Как я могу клонировать последнюю строку и увеличивать аргумент $i в onChange = "CalcSale(this.form, $i);"

Я бы вообще этого не делал. Я бы предложил использовать современную обработку событий, возможно, с делегированием событий:

1. Не выводите onChange атрибут для input элементов, но включайте в них либо классы, либо data-* атрибуты (возможно price-value , и regular-price классы).

2. Измените CalcSale функцию, чтобы она принимала событие DOM.

 function CalcSale(event) { // <== Consider using standard JavaScript convention: `calcSale`
   const row = $j(event.target).closest("tr");
   const priceValue = row.find(".price-value");
   const regularPrice = row.find(".regular-price");
   // ...use `priceValue` and `regularPrice` jQuery objects
}

3. Подключитесь CalcSale следующим образом:

 $j("#page_prices").on("change", ".price-value, .regular-price", CalcSale);

(Подумайте также о добавлении input события: .on("change input" …)

Тогда вашему коду клонирования не нужно беспокоиться об увеличении счетчика (а также проще удалять строки), и ваш существующий код работает:

 // (Not changed)
$j("#add_page_price").click(function(){
 $j("#page_prices tbody tr:last").clone().appendTo("#page_prices tbody");
})
Метки: