1

休耕表有许多相同的文本输入... 

<table>
  <tr>
    <td>
      <a href="#" id="plus"><img src="plus.png" width="12" height="12" /></a>
      <input type="text" value="0" />
      <a href="#" id="minus"><img src="minus.png" width="12" height="12" /></a>
    </td>
    .
    .

    <td>
      <a href="#" id="plus"><img src="plus.png" width="12" height="12" /></a>
      <input type="text" value="0" />
      <a href="#" id="minus"><img src="minus.png" width="12" height="12" /></a>
    </td>
  </tr>
</table>

并且闲置的jQuery脚本应该增加/减少其壁橱文本输入的值...... 

 $("#plus").click(function(){
   var text = $(this).next(":text");
   text.val(parseInt(text.val(), 10) + 1);
 });

$("#minus").click(function(){
   var text = $(this).prev(":text");
   aux.val(parseInt(aux.val(), 10) - 1);
 });

问题是脚本只能在表格的第一对链接上正常工作，将其最接近的文本输入的值递增和递减一个，其余的链接对不会改变其最近的值文本输入，更糟糕的是，home/jthernandez/Desktop/test.html#当点击链接时，链接会传播到 url。

我不太确定这里发生了什么，但想法是每对 +，- 链接分别更改其 next()、prev() 文本输入的值。任何建议都会很棒。谢谢

4

4 回答 4

3

第一; 任何 HTML 元素都不应重复另一个元素的 ID。

其次，因为事件只针对一组特定的元素，特别是具有该 ID 的第一个元素。我会考虑采用不同的策略：

<input type="text" value="0" id="text1">

<a href="#" class="minusLink" data-target="text1">Minus</a>

然后你可以像这样定位你的脚本：

$('.minusLink').click(function()
{
   var target = $('#' + $(this).data('target'));

   target.val(parseInt(target.val(), 10) - 1);
});
于 2012-05-04T17:59:19.253 回答
3

你很亲密。正如其他人所提到的，您不能多次拥有相同的 ID。ID 是唯一的，用于标识单个元素。JavaScript 只会查找直到找到一个，然后停止。类用于对公共元素进行分组。使用一个类，您的代码应该可以正常工作（减去您的 javascript 中的错字）：

HTML：

<td>
    <a href="#" class="plus"><img src="plus.png" width="12" height="12" /></a>
    <input type="text" value="0" />
    <a href="#" class="minus"><img src="minus.png" width="12" height="12" /></a>
</td>

JS（你在减号有错字，创建text，但使用aux）：

$(".plus").click(function(){
    var text = $(this).next(":text");
    text.val(parseInt(text.val(), 10) + 1);
});

$(".minus").click(function(){
    var text = $(this).prev(":text");
    text.val(parseInt(text.val(), 10) - 1);
});

演示：http: //jsfiddle.net/jtbowden/bfM9Z/

于 2012-05-04T18:08:18.203 回答
1

您应该引用类而不是 id，因为您看到按 id 选择只会检索第一个匹配项

于 2012-05-04T17:59:35.980 回答
1

元素上的 ID 只能出现一次。相反，将 ID 更改为类。

于 2012-05-04T18:03:18.647 回答