0

私は誓います、この質問はおそらくどこか他の場所にありますが、私はそれを見つけることができません!!! しかし、ここにあります： 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>

この背後には、次の 2 つの問題があります。

  1. 新しいフィールドが作成されるたびに、以前のフィールド値は消去されます。(理由はわかりません。新しい innerHTML 行を追加することになっているのに、なぜ以前の値が消去されるのでしょうか?)
  2. 更新をすばやくクリックすると、機能が重複し、この形式で一方を他方より先に実行する方法がわかりません。私は他の質問を見てきましたが、それらはすべて、私がやろうとしていない2つの関数または何かを使用することを含みます.
4

2 に答える 2

1

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 を使用してコンテンツを検索します。これは、更新領域を検索した方法と同様です。
  • $objinnerHTML を使用して文字列を追加する代わりに、jquery を使用して新しいオブジェクト ( ) を作成します。
  • innerHTML を使用する代わりにjquery append/appendToを使用して追加する$obj$content
  • $obj を直接使用して実行しますslideToggle(したがって、ルックアップはありません)。これにより、すばやくクリックしたときに発生していた操作のタイミング/順序の問題が修正されます。
于 2013-01-21T20:20:25.590 に答える
0

これを試してください私があなたを正しく理解している場合、これにより、入力した入力が保持され、さらに追加されます：

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();
    });
于 2013-01-21T20:33:00.500 に答える