jQuery .clone()后的递增函数参数

Question

我有一个php脚本，用于在表中打印当前页面的价格值。每一行是一种产品的不同价格，可以编辑。

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

根据用户输入计算的函数有两个:CalcSale和CalcPerc。它们中的每一个都使用输入和计数器$i的值，以便在每一行上分别计算。当用户决定添加新价格并单击add_page_price时，最后一行将被克隆为:

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

问题是:我如何克隆最后一行并增加onChange = "CalcSale(this.form, $i);"

中的参数$i

Answer 1

我如何克隆最后一行并增加onChange = "CalcSale(this.form, $i);"中的参数$i

我根本不会那样做。我建议使用现代事件处理，可能包括事件委托:

1。不要在input元素上输出onChange属性，但要在它们上包含类或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");
})