Question

如何将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);
    }
});

Answer 1

这不使用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);
    }
});

Answer 2

那样的东西？

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();
    }
});

获取每个div onClick - JQuery的每个输入

2 个答案: