複数のステートメントを統合する方法

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ジャスト（CSSクラスはここで助ける）の検証を必要とするすべてのオブジェクトにイベントハンドラを設定し

<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

：

$(".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に共通のクラスを追加し、それぞれに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>