我想立即显示用户的输入,因此每个输入都有一个相应的显示div。
html:
<div class="row">
<div class="col-lg-3">
<?php echo $this->Form->input('contact_person'); ?>
</div>
<div class="col-lg-3">
<?php echo $this->Form->input('mobile'); ?>
</div>
<div class="col-lg-3">
<label for=""><?php echo __('Contact Person'); ?></label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for=""><?php echo __('Mobile'); ?></label>
<div id="test2"></div>
</div>
</div>
javascript:
$('#PostContactPerson').keyup(function(){
$('#test1').html(this.value);
});
$('#PostMobile').keyup(function(){
$('#test2').html(this.value);
});
我是Javascript的新手..是否有办法将所有这些相同的脚本组合在一起,以便一个键功能处理所有即时输入显示?
答案 0 :(得分:2)
$('input').keyup(function(){
var outputId = null;
switch ($(this).attr('name')) {
case 'contact_person': outputId = '#test1'; break;
case 'mobile': outputId = '#test2'; break;
}
$(outputId).html($(this).val());
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="test2"></div>
</div>
</div>
&#13;
考虑一下(我改变了HTML的示例,但是你的HTML很好)
但您可能想要更改输出字段的ID:
$('input').keyup(function(){
$('#output_'+$(this).attr('name')).html($(this).val());
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="output_contact_person"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="output_mobile"></div>
</div>
</div>
&#13;
在这种情况下,输出字段的ID与输入字段的名称相同,但前缀为&#34;输出_&#34;
或者,如果您有一些字段无法使用输出字段,请考虑告诉输入字段它们有输出字段:
$('input').keyup(function(){
var outputId = $(this).data('output');
if (outputId) {
$(outputId).html($(this).val());
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" data-output="#test1" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" data-output="#test2" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="test2"></div>
</div>
</div>
&#13;
注意data-output-attribute链接到output-div。
答案 1 :(得分:1)
您可以通过两种方式找到处理函数事件的来源:this
或event.target
:
<div>first</div>
<div>second</div>
<script>
var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; ++i) divs[i].addEventListener("click",function(e) {
alert(e.target.innerHTML);
alert(this.innerHTML);
});
</script>
尝试点击div on the fiddle。
DOM traversal有很多方法,但是如果你想使用id,你可以创建字典:
var targets = {
"PostContactPerson": "test1",
"PostMobile": "test2"
};
并且处理函数将是
function(e) {
$('#'+targets[this.id]).html(this.value);
}