0

jqueryを学習して理解しようとしていますが、複数のセレクターで問題が発生しています。セレクターの1つに複製されたjqueryオブジェクトがある場合、属性、ID、および名前を更新できないようです。

HTML

<div class="File">
    Choose a file:
<input id="File0" name="File0" type="file" />
</div>

<input id="AddFile" type="button" value="Add a File" />

<div id="div1"></div>
<div id="div2"></div>

Jquery

 var lastId = 0;
$(document).ready(function () {
        $("#AddFile").click(function () {
            var id = "File" + ++lastId;
            var myInput = $(".File:first").clone(true);

            // Why doesn't this update the input of type 'file' 
            // on the page when selecting multiple selectors?
            $("input:file", myInput ).attr({ id: id, name: id });

             //But if you have omit 'myInput' like this, it will work.
             // $("input:file").attr({ id: id, name: id });

             //This will also work
             //$('#div1, #div2').attr({ id: id, name: id });

             //If I add in the cloned object at the end, it will only
             //modify the input element and not the div with class=File
             //imyInput.insertBefore("#AddFile");
        });
 });

上記のコードを実行すると。[ファイルの追加]ボタンを何度クリックしても、domはid = "File0" name = "File0" type="file"と表示されます。

4

4 に答える 4

0

複製されたオブジェクトで何もしていません。複製されたオブジェクトを追加するか、既存のものと置き換えます。

注: .clone() メソッドを使用すると、複製された要素またはその内容を、ドキュメントに (再) 挿入する前に変更できます。( http://api.jquery.com/clone/ )

ID と名前のみを更新する場合は、この JS フィドルhttp://jsfiddle.net/adiioo7/22wja/2/を使用できます。

JS:-

$(document).ready(function () {
    var lastId = 1;
    $("#AddFile").click(function () {
        var id = "File" + ++lastId;
        var myInput = $(".File:first");

        $(myInput).attr({
            id: id,
            name: id
        });

    });
});
于 2013-03-03T14:53:18.843 に答える
0

うまくいっているようです。var lastId を初期化し、appendTo() を使用してクローンをページに配置しました。

http://jsfiddle.net/yWVhC/2/

var lastId = 0;

$("#AddFile").click(function () {
    var id = "File" + ++lastId;
    var myInput = $(".File:first").clone(true).appendTo('body');

    // Why doesn't this update the input of type 'file' 
    // on the page when selecting multiple selectors?
    $("input:file", myInput).attr({
        id: id,
        name: id
    });
});

これで問題が解決しない場合は、問題をより明確にする必要があります。

于 2013-03-03T15:07:21.130 に答える
0

これを試してください：http://jsfiddle.net/fcscd/1/

$(document).ready(function () {

  var lastId = 0;
  $("#AddFile").click(function () {
      var id = "File" + (++lastId);
      var myInput = $(".File:first").clone(true).insertAfter(".File:last");

      myInput.attr({
          id: id,
          name: id
      });
  });
});

最後の要素の後に要素を複製して挿入し<div class="File">、属性を更新します

于 2013-03-03T15:16:22.770 に答える
-1

これは jQuery では無効です。

$("input:file", myInput ).attr({ id: id, name: id });

上記では、myInput は属性を変更しますが、最初の入力要素は変更しません。

まず、複製されたオブジェクトを DOM に追加します。

var myInput = $(".File:first").clone(true).appendTo("body");

次に、属性を変更します。

myInput.attr({ id: id, name: id });
于 2013-03-03T15:08:50.207 に答える