3

我在控制面板中有许多这样的多项选择，我希望使用 JQuery 将数据输入到文本字段中。格式最好是 Question、AnswerOpt1、AnswerOpt2.... 我已经尝试过下面提供的代码以及它的一些变体，但没有成功。

HTML

<div class="formRow">
    <label>Multiple Choice: </label>
    <div class="formRight">
        Question: <input type="text" class="MCQuestion" />
    </div>
    <div class="formRight MCAns">
        Answer Option1: <input type="text" class="MCAnswer"/>
    </div>
    <div class="formRight MCAns">
        Answer Option2: <input type="text" class="MCAnswer"/>
    </div>
</div>

<div><a href="#" id="Save">Save</a></div>
<div id="log"></div>

Javascript

$("#Save").on("click",function() {
    $(".MCQuestion").each(function(){
        if($(this).val()!=""){
            $(this).parent().find(".MCAnswer").each(function(){
                $('#log').after($(this).val());
            });
        }
    });
return false;
});
4

2 回答 2

4

When you're traversing up to the parent element of .MCQuestion you're only getting to .formRight. Use closest to go up to the .formRow then back down to each .MCAnswer:

$("#Save").on("click",function() {
    $(".MCQuestion").each(function(){
        if($(this).val()!=""){
            $(this).closest(".formRow").find(".MCAnswer").each(function(){
                $('#log').after($(this).val());
            });
        }
    });
    return false;
});
于 2013-06-25T20:12:23.843 回答
1

代替

$('#log').after($(this).val());

和

$('#log').append($(this).val() + ' ');

编辑

这条线也有问题

$(this).parent().find(".MCAnswer")

用。。。来代替

$(this).closest('.formRow').find(".MCAnswer")

.parent获取相关元素的直接父级。但是具有类MCAnswers的元素存在于formRow元素内部而不是直接父级。

在多次使用时缓存选择器也是一个更好的主意。

代码

$("#Save").on("click", function () {
    $(".MCQuestion").each(function () {
        var $this = $(this),
            value = $this.val();
        if (value != "") {
            $this.closest('.formRow').find(".MCAnswer").each(function () {
                $('#log').append(value + ' ');
            });
        }
    });
    return false;
});

检查小提琴

于 2013-06-25T20:09:14.140 回答