2013-09-03 2 views
0

У меня есть форма, которая имеет несколько полей ввода, и мне нужно, чтобы каждое поле ввода копировало значение в этом поле в соответствующее поле рядом с ним. Хотя это, возможно, действительно путало здесь, это скрипка, которая поможет проиллюстрировать то, что я пытаюсь достичь.jQuery, каждый цикл и поля ввода копий

http://jsfiddle.net/nmfurr/nA37d/234/

$(function() { 
var i = 0; 
var rowID = $('.row').each(function() { 
    i++; 
    var newID = 'row' + i; 
    $(this).attr('id', newID); 

}); 

выше, где я пытаюсь добавить идентификатор каждого сНу контейнера вокруг двух полей ввода. Я предполагаю, что это лучший способ настроить только те, которые мне нужны.

rowID.each(function() { 
    var rowID = $(this); 
    $("#row1").find(".copy-btn").click(function() { 
     var doppelValue = $("input[id^='edit-doppel-field-und-0-value--']"); 
     var pristineValue = $("input[id^='edit-field-hub']"); 
     doppelValue.val(pristineValue.val()); 
     return false; 
    }); 
}); 

Здесь я пытаюсь скопировать значение. проблема, с которой я столкнулся, заключается в том, что одна кнопка копирования дублирует первое поле ввода и вставляет результаты в каждое другое поле ввода. Какие-либо предложения?

ответ

0

Ваш вопрос код, который вы выбираете элементы с той же селекторе Таким образом, ваш запрос возвращает все входы в форму вместо правого элемента: я изменил код, и кажется, штраф в jsfiddle:

$(function() { 
var i = 0; 
var rowID = $('.row').each(function() { 
    i++; 
    var newID = 'row' + i; 
    $(this).attr('id', newID); 

}); 

rowID.each(function() { 
    var rowID = $(this); 
    rowID.find(".copy-btn").click(function() { 
     var doppelValue = rowID.find("input[id^='edit-doppel-field-und-0-value--']"); 

     var pristineValue = rowID.find("input[id^='edit-field-hub']"); 

     doppelValue.val(pristineValue.val()); 
     return false; 
    }); 
}); 
+0

спасибо, что указал на мою тупую ошибку, сейчас работает хорошо! – user2743166

+0

* «Хороший» * - относительный термин; в коде есть много неэффективности, не в последнюю очередь избыточный дубликат - каждый цикл, я умоляю вас изучить и выбрать один из других подходов ... если у вас возникнут трудности, видя разницу, просто добавьте комментарий, я уверен, что я или другой автор мог бы прокомментировать, что делают строки кода и почему :) –

0

Ваш html может измениться? лучший способ сделать это было бы просто обход йота ...

$('.copy-btn').on("click" , function(e) { 

    var selector = "[class^=span]"; 
    var $this = $(this); 
    var $first = $this.closest(selector).prev(selector).find("input"); 
    var $second = $this.closest(selector).next(selector).find("input"); 

    $first.val($second.val()); 

    e.preventDefault(e); 

}); 

http://jsfiddle.net/nA37d/240/ < - там работает

+0

Вы также можете повысить эффективность кода, предоставив каждому '' span - * ''еще один класс, такой как:' span-first-input' и 'span-second-input' или что-то еще ...' [class^=] 'селектор довольно медленный. :) –

1

Вы можете просто получить значение предыдущего ввода и скопировать его к следующему используя index.

$(function() { 
    $(".copy-btn").click(function() { 
    var index = $(":input").index(this); 
    var prevInput = $(":input:eq(" + parseInt(index - 1, 10) + ")"); 
    var nextInput = $(":input:eq(" + parseInt(index + 1, 10) + ")"); 
    nextInput.val(prevInput.val()); 
    return false; 
    }); 
}); 
Смежные вопросы