亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 js 和增量符號 (++) 克隆一個項目,我的錯誤是雙增量 i

使用 js 和增量符號 (++) 克隆一個項目,我的錯誤是雙增量 i

臨摹微笑 2023-03-03 15:02:10
這是我的問題:document.addEventListener("DOMContentLoaded",function() {    const adduser = document.querySelector("#add-user");    const original = document.querySelectorAll('#input');    let i = 0;    function duplicate() {                let clone = original[0].cloneNode(true);        clone.id = "input" + ++i;        clone.name = "input" + ++i;                original[0].after(clone);    }    adduser.onclick = function() {        duplicate();    };});<form action="second.php" method="post">    <div class="form-group">        <label for="username">Name of the user:</label>        <input type="text" class="form-control multinput" class="username" id="input" placeholder="Enter the user's name" name="fullName">        <button type="button" class="btn btn-default" id="add-user">+ Add a user</button>    </div>    <div class="buttons">        <input type="submit" name="submit" id="submit" class="button" value="Submit"/>    </div></form>正如您已經猜到的那樣,我正在嘗試克隆一個字段,但我想增加這個字段的兩個屬性(在本例中,這是一個輸入字段)?,F在我的問題是,一旦我按下按鈕克隆 INPUT,在這種情況下,我將增加 id 和名稱,但不幸的是,它們不會保持相同的數字,實際上標記將變為:<form action="second.php" method="post">    <div class="form-group">        <label for="username">Name of the user:</label>        <input type="text" class="form-control multinput" id="input" placeholder="Enter the user's name" name="fullName">        <input type="text" class="form-control multinput" id="input" placeholder="Enter the user's name" name="input3">        <input type="text" class="form-control multinput" id="input" placeholder="Enter the user's name" name="input1">        <button type="button" class="btn btn-default" id="add-user">+ Add a user</button>    </div>    <div class="buttons">        <input type="submit" name="submit" id="submit" class="button" value="Submit">    </div></form>這個。正如您所注意到的,在我的選擇中,我們有兩個錯誤的操作,它們是:克隆然后附加到原始輸入的輸入順序錯誤,因為它被添加到第一個元素 (0),所以附加的最后一個元素不會是上升的,但在這種情況下,它將具有更高的數字。id 和 name 都會遞增,所以我將有相同的輸入,id=1 和 name=2,這是不理想的。關于如何解決問題的任何提示?
查看完整描述

2 回答

?
慕田峪4524236

TA貢獻1875條經驗 獲得超5個贊

i僅遞增一次,在您分配新的id和之前name。此外,使用insertAdjacentElement按鈕在它之前插入每個新輸入,而不是after, 來插入新輸入:


  function duplicate() {

    i++;

    let clone = original[0].cloneNode(true);

    clone.id = "input" + i;

    clone.name = "input" + i;

    document.querySelector('button').insertAdjacentElement('beforebegin', clone);

  }

document.addEventListener("DOMContentLoaded", function() {

  const adduser = document.querySelector("#add-user");

  const original = document.querySelectorAll('#input');

  let i = 0;


  function duplicate() {

    i++;

    let clone = original[0].cloneNode(true);

    clone.id = "input" + i;

    clone.name = "input" + i;

    document.querySelector('button').insertAdjacentElement('beforebegin', clone);

  }


  adduser.onclick = duplicate

});

<form action="second.php" method="post">

  <div class="form-group">

    <label for="username">Name of the user:</label>

    <input type="text" class="form-control multinput" class="username" id="input" placeholder="Enter the user's name" name="fullName">

    <button type="button" class="btn btn-default" id="add-user">+ Add a user</button>

  </div>

  <div class="buttons">

    <!-- <input type="button" name="next" value="submit"> -->

    <input type="submit" name="submit" id="submit" class="button" value="Submit" />

  </div>

</form>


查看完整回答
反對 回復 2023-03-03
?
互換的青春

TA貢獻1797條經驗 獲得超6個贊

三件事:

  • 在使用它之后增加 i,而不是每次你需要它時它都會增加多次而不是每次重復增加 1

  • 使用 setAttribute

  • 追加到父元素,而不是在原始輸入之后實現降序

document.addEventListener("DOMContentLoaded",function() {

    const adduser = document.querySelector("#add-user");

    const original = document.getElementById('input');

    let i = 1;


    function duplicate() {

        

        let clone = original.cloneNode(true);

        clone.setAttribute("id", "input"+i);

        clone.setAttribute("name", "input"+i);

        i++

        

        original.parentNode.appendChild(clone);

    }


    adduser.onclick = function() {


        duplicate();


    };

});

<form action="second.php" method="post">

    <div class="form-group">

        <label for="username">Name of the user:</label>

        <input type="text" class="form-control multinput" class="username" id="input" placeholder="Enter the user's name" name="fullName">

        <button type="button" class="btn btn-default" id="add-user">+ Add a user</button>

    </div>

    <div class="buttons">

        <input type="submit" name="submit" id="submit" class="button" value="Submit"/>

    </div>

</form>


查看完整回答
反對 回復 2023-03-03
  • 2 回答
  • 0 關注
  • 160 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號