如何将div中的每个()输入值转换为每个() div onClick的innerHTML?我想使用each()或类似的东西,因为我需要将它扩展到多个制表符和行,这是我到目前为止所做的。
事件触发器:
<input type='radio' name='tab' id='tab1'>
<label for='tab1'>Tab 1</label>
输入:
<div class='row' id='tab1-container'>
<div class='cell'>
<input type='text'>
</div>
<div class='cell'>
<input type='text'>
</div>
<div class='cell'>
<input type='date'>
</div>
</div>
输出:
<div class='row' id='preview1'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
JQuery的:
$(document).on("click", "#tab1", function () {
$(function () {
$('#tab1-container .cell input').each(function () {
input = $(this).val();
$('#preview1 .cell').html(input);
});
});
});
学习JQuery,我在这里做错了什么? 看我的jsfiddle:http://jsfiddle.net/GSnqR/7/
解决方案 我去了(由杰克逊提供,但没有find()函数),这允许我获得所有输入并将它们转储到预览选项卡:
$(document).on('click', '.tab', function () {
var inputs = $('.tab-container .cell input');
var outputs = $('.preview .cell');
for (var i = 0; i < inputs.length; i += 1) {
var value = $(inputs[i]).val();
$(outputs[i]).html(value);
}
});
答案 0 :(得分:2)
这不使用each()
,但它基本上做同样的事情。 (此外,JS中的for
循环更快。)
var inputs = $('#tab1-container .cell input');
var outputs = $('#preview1 .cell');
$('#tab1').on('click', function () {
for (var i = 0; i < inputs.length; i += 1) {
var value = $(inputs[i]).val();
$(outputs[i]).html(value);
}
});
小提琴:http://jsfiddle.net/EdqxG/1/
如果您想扩展此功能以获得更多标签而不仅仅是“tab1”......
$(document).on('click', '.tab', function () {
var $this = $(this);
var inputs = $this.find('.tab-container .cell input');
var outputs = $this.find('.preview .cell');
for (var i = 0; i < inputs.length; i += 1) {
var value = $(inputs[i]).val();
$(outputs[i]).html(value);
}
});
答案 1 :(得分:0)
那样的东西?
http://jsfiddle.net/pmcalabrese/U6tQQ/
一些建议:
1)避免使用带方括号的id属性
2)使用example作为精湛的jquery文档的开始
$(document).on("click", "#tab1", function () {
elements = $('#preview0 .cell');
$(function () {
$('#tab1-container .cell input').each(function (index) {
input = $(this).val();
$(elements[index]).html(input);
});
});
});
$(".row .cell input").on('keyup change', function () {
if ($(this).val().length == 0) {
//At least one input is empty
$(this).parent().siblings().children("button").hide();
} else {
$(this).parent().siblings().children("button").show();
}
});