0

次のようなフォームにカウンターがあります。

ここに画像の説明を入力

ユーザーがプラス/マイナス アイコンをクリックすると、カウンターが正しく増減します。私がやろうとしているのは、ユーザーがプラス記号をクリックするとフォーム要素を追加し、マイナス記号を選択するとそれらを削除することです。これが私のhtmlです：

<div class="label01">Total attendees:</div>
  <div class="field01">
    <input name="qty" type="text" size="4" value="1" readonly="readonly" style="background:#999;"/>
     <img src="/assets/images/minus_icon.png" id="dec">
     <img src="/assets/images/plus_icon.png" id="inc">
     (include yourself in this count)
   </div>
   <div class="additional"></div>

私のjquery：

$(document).ready(function() 
{  
    $(function() {
      $("#inc").click(function() { 
        var num = $(":text[name='qty']").val(function(i, v) { 
                       return Number(v) + 1;
                  }).val();
        $(this).addClass ('c' + num);
        var incrementVar = num;
        $('.additional').append("<div id='a_'" + num + ">Test</div>");
      }); 

      $("#dec").click(function() {      
        $(":text[name='qty']").val(function(i, v) { 
            if(Number(v) > 1){              
                return Number(v) - 1; 
            }
            else{
                return 1;
            }
            $("div").removeClass("a_" + Number(v) - 1);
        });
      });  
    });
});

上記のコードは、テスト div を正しく追加していますが、削除しません。助言がありますか？

4

2 に答える 2

2

removeClass() を使用しています。remove() を使用する必要があります。

$("#a_" + Number(v) - 1).remove();

編集:コードを見ると、到達できないコードがあります:

$("#dec").click(function() {      
    $(":text[name='qty']").val(function(i, v) { 
        if(Number(v) > 1){              
            return Number(v) - 1; 
        }
        else{
            return 1;
        }
            // unreachable
        $("div").removeClass("a_" + Number(v) - 1);
            // should be
            $("#a_" + Number(v) - 1).remove();
    });
  });

編集：

あなたのコードに問題があることがわかりました。
$('.additional').append("<div id='a_'" + num + ">Test</div>");

する必要があります

$('.additional').append("<div id='a_" + num + "'>Test</div>");

ここに動作するjsfiddleがあります：http://jsfiddle.net/TH79T/

于 2012-08-29T14:29:49.543 に答える
1

試す：

$("#inc").click(function() {
   $("#additional").append("<div></div>");
});

$("#dec").click(function() {
   $("#additional").last().remove();
});
于 2012-08-29T14:33:22.807 に答える