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);
 });

問題は、スクリプトがテーブルの最初のリンクのペアでのみ正常に機能し、入力された最も近いテキストの値を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は、1つが見つかるまで検索し、その後停止します。クラスは、共通の要素をグループ化するために使用されます。クラスを使用すると、コードは正常に機能するはずです（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は1回だけ発生します。代わりに、IDをクラスに変更してください。

于 2012-05-04T18:03:18.647 に答える