对于每个输入，Index-Id总是具有相同的值

Index-Id always has the same value for every input

本文关键字：输入 于每个 Index-Id      更新时间：2023-09-26

所以我已经动态创建了表单，我想获得某些输入的索引id与名称，如championSpell[]我需要知道哪一个是哪一个，所以我想到使用索引id，但它改变每个输入索引相同的值时，按下添加拼写按钮。您可以在这里测试这个问题http://89.69.172.125/test.php

$(function() {
             $('body').on('click', '#addSpell',function() { 
                  $(
                   '<p><select name="change[]" id="change[]" onchange="val(this)"><option value="Passive">Passive</option><option value="Q" selected>Q</option><option value="W">W</option><option value="E">E</option><option value="R">R</option></select><label for="var"><input type="text" id="championSpell[]" name="championSpell[]" data-id="" readOnly="true"><br><textarea type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Description" /><select><option value="buff">Buff</option><option value="nerf">Nerf</option><option value="new">New</option><option value="change">Change</option><option value="bugfix">Bugfix</option></select></label> <a href="#" id="addGeneral">Add Change</a> <a href="#" id="remVar">Remove Spell</a></p>').appendTo($(this).next());
                     $('input[name="championSpell[]"]').attr('data-id', y);
                    y++;
                    return false;
            });
});

不良做法

(例如，使用label作为块元素)

(使用jquery创建这样的模板文件)

(等)

(等)

问题在于没有初始化变量y，并且最终更改了所有data-id值。试试这个更新的(更可读的)位

$(function () {
    var y = 0;
    $('#addSpell').on('click', function(){
        $(['<p>',
                '<select name="change[]" id="change[]" onchange="val(this)">',
                    '<option value="Passive">Passive</option>',
                    '<option value="Q" selected>Q</option>',
                    '<option value="W">W</option>',
                    '<option value="E">E</option>',
                    '<option value="R">R</option>', 
                '</select>',
                '<label for="var">',
                    '<input type="text" id="championSpell[]" name="championSpell[]" data-id="' + y +'" readOnly="true">',
                    '<br>',
                    '<textarea type="text" id="p_scnt" size="20" name="p_scnt_' + y + '" value="" placeholder="Enter Description">',
                    '<select>','' +
                        '<option value="buff">Buff</option>',
                        '<option value="nerf">Nerf</option>',
                        '<option value="new">New</option>',
                        '<option value="change">Change</option>',
                        '<option value="bugfix">Bugfix</option>',
                    '</select>',
                    '</label>',
                '<a href="#" id="addGeneral">Add Change</a>',
                '<a href="#" id="remVar">Remove Spell</a>',
        '</p>'].join('')).appendTo($(this).next());
        y++;
        return false;
    });
});

在你代码 $('输入[name = " championSpell[]"]")。attr('data-id'， y);这将改变所有输入data-id。而不是直接添加它的data-id。Like data-id="'+y+'"

我已经更新了你的代码。

请尝试此代码

$(function() {
             $('body').on('click', '#addSpell',function() { 
                  var championdataid = $('input[id="champion[]"]').attr('data-id');
                  $(
                   '<p><select name="change[]" id="change[]" onchange="val(this)"><option value="Passive">Passive</option><option value="Q" selected>Q</option><option value="W">W</option><option value="E">E</option><option value="R">R</option></select><label for="var"><input type="text" id="championSpell[]" name="championSpell[]" data-id="'+y+championdataid +'" readOnly="true"><br><textarea type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Description" /><select><option value="buff">Buff</option><option value="nerf">Nerf</option><option value="new">New</option><option value="change">Change</option><option value="bugfix">Bugfix</option></select></label> <a href="#" id="addGeneral">Add Change</a> <a href="#" id="remVar">Remove Spell</a></p>').appendTo($(this).next());
                     //$('input[name="championSpell[]"]').attr('data-id', y);
                    y++;
                    return false;
            });
});
相关文章：