如何整合多个语句

Question

我想运行此语句20个输入框。有没有一种干净的方式来结合？似乎会有很多的陈述。设计用于捕获输入到输入中的数据，然后在点击按钮后将其显示在HTML中。目前只有1行代码有效，需要添加几行代码。

$(".showreg").click(function(){ 

    var pagetitle = $('#f_k_page_title').val(); 

    if(!pagetitle) 
    {pagetitle = "Oop's No value entered";} 
    $('#theValue').html(pagetitle); 
}); 

$(".showreg").click(function(){ 
    var nametitle = $('#f_name_title').val(); 

    if(!nametitle) 
    {nametitle = "Oop's No value entered";} 
    $('#theValue2').html(nametitle); 

}); 

HTML

<span id="theValue"></span> 
    <span class="txt_111 s17" id="theValue2">Title:</span> 
    <span class="txt_555 s17" id="theValue3"></span> 

<div class="btn blue next-btn r-btn regclick3 capture_button showreg mt10">Next</div> 

FormHTML

<form> 
    <input id="f_k_page_title"/> 
    <input id="f_name_title"/> 

    <input class="btn blue createacc-btn " type="submit" name="submit" value="Create account"/> 
</form> 

Answer 1

刚刚成立事件处理程序在需要验证的所有对象（CSS类帮助这里）：

$(".validateForEmpty").on("blur", function(evt){ 
 

 
var input = $(this); 
 

 
// Get index number of the input within its group. 
 
var idx = $(".validateForEmpty").index(input); 
 
    
 
// Get reference to span corresponding to that same index 
 
var span = $(".output").get(idx); 
 

 
// Validate element that just lost the focus 
 
if(input.val().trim() === ""){ 
 
    $(span).text(input.attr("name") + " Can't be empty!"); // Put message corresponding span 
 
} else { 
 
    $(span).text(input.attr("name") + " contains: " + input.val()); // Put value in corresponding span 
 
} 
 
});

.output { display:block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" name="a" class="validateForEmpty"> 
 
</div> 
 
<div> 
 
    <input type="text" name="b" class="validateForEmpty"><span class="error"></span> 
 
</div> 
 
<div> 
 
    <input type="text" name="c" class="validateForEmpty"><span class="error"></span> 
 
</div> 
 
<div> 
 
    <input type="text" name="d" class="validateForEmpty"><span class="error"></span> 
 
</div> 
 
<div> 
 
    <input type="text" name="e" class="validateForEmpty"><span class="error"></span> 
 
</div> 
 
<div> 
 
    <input type="text" name="f" class="validateForEmpty"><span class="error"></span> 
 
</div> 
 
<div> 
 
    <input type="text" name="g" class="validateForEmpty"><span class="error"></span> 
 
</div> 
 
<div> 
 
    <input type="text" name="h" class="validateForEmpty"><span class="error"></span> 
 
</div> 
 
<div> 
 
    <input type="text" name="i" class="validateForEmpty"><span class="error"></span> 
 
</div> 
 

 
<div class="outputElements"> 
 
    <span class="output"></span> 
 
    <span class="output"></span> 
 
    <span class="output"></span> 
 
    <span class="output"></span> 
 
    <span class="output"></span> 
 
    <span class="output"></span> 
 
    <span class="output"></span> 
 
    <span class="output"></span> 
 
    <span class="output"></span> 
 
</div>

Answer 2

理想？添加一个普通类，你关心的所有input S和A data-valuespan属性各的，所以我们知道往哪里放消息，例如

<input id="f_k_page_title" class="validatee" data-valuespan="theValue" /> 
<input id="f_name_title" class="validatee" data-valuespan="theValue2" /> 

然后：

$('.validatee').each(function() { 
    var el = $(this); 
    var val = el.val() || "Oops, no value entered"; 

    $('#' + el.data('valuespan')).text(val); 
}); 

但是，如果你真的不能改变HTML，你需要信任的表单元素的顺序。并交代了事实，即所有span小号除了第一有许多...

$(".showreg").click(function(e) { 
 
    var inps = $('form').first().find('input'); 
 

 
    for (var i = 0; i < inps.length; ++i) { 
 
    var inp = inps[i]; 
 

 
    if (inp.type !== "submit") { 
 
     var spanNum = (i > 0) ? (i + 1) : ''; 
 
     var spanName = 'theValue' + spanNum; 
 

 
     var val = inp.value || 'Oops, no value entered'; 
 
     $('#' + spanName).text(val); 
 
    } 
 
    } 
 
});

span { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<span id="theValue"></span> 
 
<span class="txt_111 s17" id="theValue2">Title:</span> 
 
<span class="txt_555 s17" id="theValue3"></span> 
 

 
<div class="btn blue next-btn r-btn regclick3 capture_button showreg mt10">Next</div> 
 

 

 
<form> 
 
    <input id="f_k_page_title" /> 
 
    <input id="f_name_title" /> 
 
    <input id="f_other" /> 
 

 
    <input class="btn blue createacc-btn " type="submit" name="submit" value="Create account" /> 
 
</form>