Question

对于noobish问题感到抱歉但是，我正在尝试构建一个表单摘要，它将填充div（立即）以及所使用的所有字段。以下是该字段的一小部分示例： Fiddle

由于某种原因，JS没有像我期望的那样工作，有人能指出我做错了什么吗？

例如，我希望输出：＆＃34; AND name：john除了编号222＆＃34;。

我还希望能够点击结果将其删除，然后清除该字段。谢谢

$(".allS").change(function () {
    if ($(this).next('.textArea').not(':empty'))
    // varible to hold string
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("#text_here").text(str);
}).change();

$('.textArea').change(function(){

    var $inputs = $('form#form :input[type="text"]'),
        result = "";

    $inputs.each(function(){
        // access the individual input as jQuery object via $(this)
        result += $(this).val()+"<br>";
    });

    // store result in some div
    $('div#text_here').text(result);
}).change();

Answer 1

您的代码中存在许多错误。我将它简化为一个非常短的代码，只执行获取所请求输出所需的代码。这是working fiddle。

$(".allS, .textArea").change(function () {
    var str = '';
    if ($('#name').val().length > 0 && $('#number').val().length > 0)
        var str = $('#nameMod>option:selected').text() + ' name:' + $('#name').val() + ' ' + $('#numberMod>option:selected').text() + ' number ' + $('#number').val();

    $("#text_here").html(str);
});

基本上，这样做是将change事件处理程序附加到两个类（.alls, .textArea），并且当触发事件时，将测试两个输入字段的任何内容。如果此测试通过，则由所有相关值组成一个字符串，并设置div内容。如果测试失败（无内容），则str变量包含空字符串，并清除div。

Answer 2

只是看一下代码，选择器'form#form :input[type="text"]'看起来不对。对于初学者来说，输入不是伪类。此外，属性匹配不应该有引号。

这可能是也可能不是你想要的（我认为是，从你的HTML看）：

'form#form input[type=text]'

由于您拨打了<br>，因此text()无法正常工作。请改为呼叫html()。

难以使用JS构建表单摘要

2 个答案: