有沒有辦法簡化成只有幾行jQuery

我想顯示一個表單的輸入值到他們相應的div/p標籤。因此，無論用戶何時開始輸入字段，該值都將被寫入輸入框以及頁面中其他地方的p標籤中。有沒有辦法簡化成只有幾行jQuery

我有我的jQuery看每個單獨的表單域，並顯示該信息到一個指定的p標記。有沒有辦法編寫這段代碼，所以我不必爲每個表單字段創建多行代碼？

現在寫它正在檢查表單是否有變化，然後查看該字段是否有值，如果是，則在p標記中顯示信息，如果不是，則會使p標記爲空。

他是我現在工作的。

$('#webform-client-form-1').on('change',function(e){ 
 
    /* Distributor Name INPUT */ 
 
    var distributorNameInput=$('#edit-submitted-distributor-name').val(); 
 
     if(!$("#edit-submitted-distributor-name").val()) { 
 
     $(".distributor-name p").html(""); 
 
    } else { 
 
     $(".distributor-name p").html("<strong>Distributor Name</strong> <br/>" + distributorNameInput); 
 
    }; 
 
/* Year INPUT */ 
 
    var YearInput=$('#edit-submitted-year').val(); 
 
    if(!$("#edit-submitted-year").val()) { 
 
     $(".year p").html(""); 
 
    }else { 
 
     $(".year p").html("<strong>Year</strong> <br/>" + YearInput); 
 
    }; 
 
    /* General Information INPUT */ 
 
    var generalinfoInput=$('#edit-submitted-general-information').val(); 
 
    if(!$("#edit-submitted-general-information").val()) { 
 
     $(".general-info").html(""); 
 
    }else{ 
 
     $(".general-info").html("<h2>General Information</h2> <p>" + generalinfoInput + "</p>"); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<form enctype="multipart/form-data" action="/" method="post" id="webform-client-form-1" accept-charset="UTF-8"> 
 
    <p> 
 
    <label>Distributor Name*</label> 
 
    <input type="text" id="edit-submitted-distributor-name" name="submitted[distributor_name]" value=" " size="60" maxlength="128" class="form-text required"> 
 
</p> 
 
<p> 
 
    <label for="edit-submitted-year">Year*</label> 
 
    <select id="edit-submitted-year" name="submitted[year]" class="form-select"> 
 
    <option value="2015" selected="selected">2015</option> 
 
    <option value="2016">2016</option> 
 
    </select> 
 
</p> 
 
</form> 
 
<div class="preview" id="preview"> 
 
    <div class="distInfo"> 
 
    <div class="distributor-name"> 
 
     <p><strong>Distributor Name</strong> <br>Text will go here</p> 
 
    </div> 
 
    <div class="year"> 
 
     <p><strong>Year</strong> <br>2015</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-10-29 Mike Boory

我不是jquery的專家，但你應該使用onkeydown事件。在更改時需要您輸入或將焦點移到其他地方 –

對於經銷商名稱輸入字段，您應該使用keyup或keydown事件而不是更改 –

而不是使用ID，您就可以使用類和數據屬性傳遞輸入目標元素：

$(document).ready(function() { 
 
    $(document).on('change input paste', '.input', function() { 
 
    $($(this).data('target')).text($(this).val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="input" data-target="#text-input" /> 
 
<select class="input" data-target="#select-input"> 
 
    <option value=""></option> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
</select> 
 

 
<hr/> 
 
<div id="text-input"></div> 
 
<div id="select-input"></div>

來源

2015-10-29 12:03:58 Justinas

哇，我一直在嘗試同樣的事情，直到幸運地看到您的回覆。完善！ –

非常感謝您的支持！這很好。 –

你大概意思是這樣直列如果

/* 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 : "");

了一種直列的語法，如果是

condition ? true code: false code

來源

2015-10-29 12:01:53 Machigatta

可以創建對象的數組，並迭代它。如果您正在考慮添加新元素，這很好，因爲您只需將它們添加到數組中即可。

$('#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: ""); 
    }); 
}

來源

2015-10-29 12:16:27 ojovirtual

有沒有辦法簡化成只有幾行jQuery

回答

相關問題