将 jQuery keyup 更新隔离到一个类答案

【问题标题】：Isolate jQuery keyup update to one class将 jQuery keyup 更新隔离到一个类
【发布时间】：2012-06-25 18:55:17
【问题描述】：

我有一些具有动态 ID 的动态生成的表行/值

<td class="control-group">
    <input name="price[418]" class="price" value="199.00">
    <span class="calcprice">I want this SPAN tag to update</span>
</td>
<td  class="control-group">
    <input name="price[424]" class="price" value="67.00">
    <span class="calcprice">I DO NOT WANT this SPAN tag to update</span>
</td>

我有一个简单的 jQuery keyup 函数，用于在此处更新 SPAN：

$('.price').keyup(function() {

   var AskPrice    = $(this).val();
   var calcSpan    = ".calcprice";
   var itemCost = AskPrice * (.8);
   console.log(itemCost);  // just for giggles

   $(this).parents().find(calcSpan).text(" You will receive $" + itemCost );

});

当用户在第一个输入字段中键入时，跨度会在两个表行中更新，这是我不想要的。我可以在每个跨度上调整类的名称，但我认为这没有帮助。

任何帮助都很棒。

【问题讨论】：

标签： jquery onkeyup

【解决方案1】：

我会使用siblings() 函数来执行此操作。

查看示例：http://jsfiddle.net/MhWm5/26/

另请注意，我必须更改您的标记。你有 td 标签没有嵌套在 table 或 tr 中，所以它没有像你想象的那样被渲染。这实际上可能是您的问题的根本原因。

【讨论】：

【解决方案2】：

$(this).parent().find(calcSpan).text(" You will receive $" + itemCost );

父母，不是父母

【讨论】：

【解决方案3】：

更改一个跨度的名称并更新该跨度！

工作演示：http://jsfiddle.net/epinapala/MhWm5/24/

<span class="calcprice1">I want this SPAN tag to update</span>

然后在你的 JS 中

$('.price').keyup(function () {
    var AskPrice = $(this).val();
    var calcSpan = ".calcprice1";
    var itemCost = AskPrice * (.8);
    console.log(itemCost);
    $(this).parent().find(calcSpan).text(" You will receive $" + itemCost);
});

【讨论】：