0

質問を指定して、複数の回答から選択できる Web アプリケーションを開発したいと考えています。プラスボタンがクリックされたときに追加の回答「ボックス」を追加する必要がありますが、特定の formRow にのみ追加されます (コードを参照)。JQuery の最後の関数を試しましたが、id=4 の回答ボックスの後に常に追加されます。

HTML:

<div class="formRow">
                <a href="#" title="" class="Remove smallButton" style="float:right;"><img src="images/icons/color/cross.png" alt="" /></a>
                <label>Multiple Choice: </label>
                <div class="formRight" style="height:28px;">Question1: <input type="text" class="MCQuestion" QID="'+QID+'" /><a href="#" title="" class="AddAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/plus.png" alt="" /></a></div>
                <div class="formRight MCAns" id="1">Answer 1: <input type="text" class="MCAnswer"/><a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/cross.png" alt="" /></a></div>
                <div class="formRight MCAns" id="2">Answer 2: <input type="text" class="MCAnswer"/><a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/cross.png" alt="" /></a></div>
                <div class="clear"></div>
            </div>
            <div class="formRow">
                <a href="#" title="" class="Remove smallButton" style="float:right;"><img src="images/icons/color/cross.png" alt="" /></a>
                <label>Multiple Choice2: </label>
                <div class="formRight" style="height:28px;">Question2: <input type="text" class="MCQuestion" QID="'+QID+'" /><a href="#" title="" class="AddAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/plus.png" alt="" /></a></div>
                <div class="formRight MCAns" id="3">Answer 1: <input type="text" class="MCAnswer"/><a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/cross.png" alt="" /></a></div>
                <div class="formRight MCAns" id="4">Answer 2: <input type="text" class="MCAnswer"/><a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/cross.png" alt="" /></a></div>
                <div class="clear"></div>
            </div>

Javascript

$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
    $(".MCAns").last().after("New Answer Optition"); //Tried this first
    $(".MCAns :last-child").after("New Answer Optition"); //Then this
});
});
4

3 に答える 3

0

最初にコンテナを取得してからformRow、必要な数のタグを追加できます。コードは次のとおりです。

$(document).ready(function() {
  $("body").on("click", ".AddAns", function(event) {
      var parent = $(this).parents('.formRow'); // Find the container .formRow first
      parent.find('.MCAns:last').after("New Answer Optition"); // Add new content after last one
  });
});
于 2013-06-25T18:05:50.570 に答える