Получить каждый вход в каждый div onClick - JQuery

0

Как получить каждое() входное значение внутри div в innerHTML каждого() div onClick? Я хочу использовать каждый() или что-то подобное, потому что мне нужно масштабировать его до нескольких вкладок и строк, это то, что у меня есть до сих пор.

Триггер события:

<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);
    }
});
Теги:
each

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);
    }
});
Поделиться
  • 0
    Вы легенда. Я не знал, что вы можете выбрать все элементы, как это; я думал, что каждая () должна была выбрать все элементы. Большое спасибо!
  • 0
    Пожалуйста! each() все еще может быть полезен - иногда - но в этом случае счетчик итераций был важен.
Показать ещё 2 комментария
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();
    }
});
Поделиться
  • 1
    Это не совсем работает так, как я хочу, кнопка скрыть / показать предназначена для проверки того, что все входы не пустые, ваш метод отображает их, когда один заполнен, и каждая функция не помещает значения в нижнюю часть предварительный просмотр. Я собираюсь пойти с ответом Джексонов. Спасибо хоть.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню