0

我想开发一个 Web 应用程序，您可以在其中指定一个问题，然后提供多个答案的选择。单击加号按钮时，我需要添加额外的答案“框”，但仅添加到特定的 formRow （请参阅代码）。我已经尝试过 JQuery last 函数，但它总是会在 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

2

使用该代码：

$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
    $('.formRow').find('.MCAns').last().after("New Answer Optition");
});
});

检查jsfiddle

于 2013-06-25T17:56:52.493 回答
2

用这个 ：

$(document).ready(function() {
    $("body").on("click", ".AddAns", function(event) {
        $(this).closest('.formRow').find('.MCAns').last().after("New Answer Optition");
    });
});

您的代码的问题是您选择MCAns了每一个并选择最后一个。您应该使用.formRow您单击的最后一个添加按钮。

于 2013-06-25T18:02:28.153 回答
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 回答