0

如何将 div 内的each()输入值放入each() 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>

查询：

$(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/

我选择的解决方案 （由 Jackson 提供，但没有 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);
    }
});
4

2 回答 2

2

这不使用each()，但它基本上做同样的事情。（此外，for循环在 JS 中要快得多。）

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);
    }
});
于 2013-09-29T19:29:12.493 回答
0

类似的东西？

http://jsfiddle.net/pmcalabrese/U6tQQ/

几个建议：

1) 避免使用方括号的 id 属性

2）使用示例作为从精湛的 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();
    }
});
于 2013-09-29T20:35:38.723 回答