Javascript 有没有办法将其简化为几行jQuery

我试图将表单的输入值显示到相应的div/p标记中。因此，每当用户开始在输入字段中键入内容时，该值将写入输入框以及页面上其他位置的p标记中

我让jQuery查看每个单独的表单字段，并将该信息显示到指定的p标记中。有没有一种方法可以编写此代码，这样我就不必为每个表单字段创建多行代码

Write now检查表单中是否有更改，然后查看字段是否有值，如果有，则在p标记中显示信息，如果没有，则使p标记为空

他就是我现在工作的人

$（'#webform-client-form-1'）。关于（'change'，函数（e）{
/*分销商名称输入*/
var distributorNameInput=$（“#编辑提交的分发服务器名称”）.val（）；
if（！$（“#编辑提交的分销商名称”）.val（）{
$（“.distributor name p”）.html（“”）；
}否则{
$（“.distributor name p”）.html（“分销商名称”
“+distributor名称输入）；
};
/*年度投入*/
var YearInput=$（“#编辑提交的年份”）.val（）；
if（！$（“#编辑提交年份”）.val（）{
$（“.year p”）.html（“”）；
}否则{
$（“.year p”）.html（“year
”+YearInput）；
};
/*一般信息输入*/
var generalinfoInput=$（“#编辑提交的一般信息”）.val（）；
if（！$（“#编辑提交的一般信息”）.val（）{
$（“.general info”）.html（“”）；
}否则{
$（“.general info”）.html（“general Information”+generalinfoInput+“
”）；
};
});


分销商名称*


年*
2015
2016

分销商名称
文本将转到此处

年度
2015

您的意思可能类似于inline if

/* Distributor Name INPUT   */
var distributorNameInput = $('#edit-submitted-distributor-name').val();
$(".distributor-name p").html( distributorNameInput ? "<strong>Distributor Name</strong> <br/>" + distributorNameInput : "");

/* Year INPUT   */
var YearInput = $("#edit-submitted-general-information").val();
$(".year p").html( YearInput ? "<strong>Year</strong> <br/>" + YearInput: "");

/* General Information INPUT   */
var generalinfoInput = $('#edit-submitted-general-information').val();
$(".general-info").html( generalinfoInput ? "<h2>General Information</h2> <p>" + generalinfoInput : "");

您可以使用类和数据属性来传递输入目标元素，而不是使用ID：


$（文档）.ready（函数（）{
$（document）.on（'change-input-paste'，'.input'，function（））{
$（$（this.data（'target'））.text（$（this.val（））；
});
});

A.
B

您可以创建一个对象数组并对其进行迭代。如果您正在考虑添加新元素，这非常好，因为您只需要将它们添加到数组中

$('#webform-client-form-1').on('change',function(e){
    var elements=new Array(
    {valueToCheck:'edit-submitted-distributor-name',className:'distributor-name', label: 'Distributor Name'},
    {valueToCheck:'edit-submitted-year',className:'distributor-name', label: 'Distributor Name'},
    {valueToCheck:'edit-submitted-distributor-name',className:'distributor-name', label: 'Distributor Name'},
    );
    //check'em
    elements.forEach(function(element){
        var myValue=$("#"+element.valueToCheck).val();
        $("."+element.className+" p").html( myValue ? "<strong>"+element.label+"</strong> <br/>" + myValue: "");
    });
}

$（'#webform-client-form-1'）。关于（'change'，函数（e）{
var元素=新数组(
{valueToCheck:'edit-submitted-distributor-name'，className:'distributor-name'，label:'distributor name'}，
{valueToCheck:'edit-submitted-year'，类名：'distributor-name'，标签：'distributor name'}，
{valueToCheck:'edit-submitted-distributor-name'，className:'distributor-name'，label:'distributor name'}，
);
//检查一下
elements.forEach（函数（元素）{
var myValue=$（“#”+element.valueToCheck.val（）；
$（“+element.className+“p”）.html（myValue？”“+element.label+”
“+myValue:”）；
});
}
我不是jquery方面的专家，但您可能应该使用onkeydown事件。在更改时，需要您点击enter或将焦点移到其他位置。对于分销商名称输入字段，您应该使用keyup或keydown事件，而不是change。哇，我也在尝试同样的事情，直到幸运地看到您的答复。太棒了！
$('#webform-client-form-1').on('change',function(e){
    var elements=new Array(
    {valueToCheck:'edit-submitted-distributor-name',className:'distributor-name', label: 'Distributor Name'},
    {valueToCheck:'edit-submitted-year',className:'distributor-name', label: 'Distributor Name'},
    {valueToCheck:'edit-submitted-distributor-name',className:'distributor-name', label: 'Distributor Name'},
    );
    //check'em
    elements.forEach(function(element){
        var myValue=$("#"+element.valueToCheck).val();
        $("."+element.className+" p").html( myValue ? "<strong>"+element.label+"</strong> <br/>" + myValue: "");
    });
}