Клянусь, этот вопрос, вероятно, еще где-то, но я не могу его найти !!! Но здесь это идет: http://jsfiddle.net/YUgxE/

Javascript:

var update = $("#CalcUpdate");
var content = document.getElementById("CalcContent");

update.click(function() { //update
    content.innerHTML += "<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>";
    obj = $(".CalcOn");
    obj.slideToggle(400,function() {
        obj.removeClass();
});

});

Html:

<button id="CalcUpdate">update</button>

На самом деле за этим стоят две проблемы:

  1. Каждый раз, когда создается новое поле, предыдущие значения поля стираются. (Я не знаю почему, он должен добавлять новые строки innerHTML, почему предыдущие значения стираются?)
  2. Если я быстро нажму кнопку «Обновить», функции пересекаются, и я не знаю, как заставить одно выполнить раньше другого в этом формате. Я видел другие вопросы, но все они связаны с использованием двух функций или чего-то еще, что я не пытаюсь сделать.
0
bnynn 22 Янв 2013 в 00:15

2 ответа

Лучший ответ

Вы используете jquery, так что используйте его! :) Вот как я обновил ваш скрипт:

http://jsfiddle.net/YUgxE/3/

var $update = $("#CalcUpdate");
    var $content = $('#CalcContent');

$update.click(function() { //update
        var $obj = $("<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>");
    $obj.appendTo($content).slideToggle(400, function() { $obj.removeClass() });
});

Примечания:

  • Использование jquery для поиска контента, аналогично тому, как вы искали область обновления
  • Используйте jquery для создания нового объекта ($obj) вместо использования innerHTML и добавления строки
  • используя jquery append / appendTo для добавления $obj в $content вместо использования innerHTML
  • используя $ obj напрямую для выполнения slideToggle (таким образом, нет поиска). Это исправляет проблему времени / порядка операций, которую вы видели при быстром нажатии.
1
Eli Gassert 21 Янв 2013 в 20:20

Попробуйте это, если я вас правильно понимаю, это сохранит все введенные вами данные и добавит больше:

update.click(function() { //update
var showinput = $("<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>").insertBefore(content);

    obj = $(".CalcOn");
    obj.slideToggle(400,function() {
        obj.removeClass();
    });
0
ROY Finley 21 Янв 2013 в 20:33