Question

我想在每次点击上添加文本框，但是我需要为每个动态添加的文本框添加id。我正在努力为它提供id下面我给出用于添加文本框的代码点击

list-style-position: outside

$(function() {
  $('.plusicon').on('click', function() {
    var textBox = '<input type="text" class="textbox"/>';
    var a = $(this).attr("id");
    $('#' + a + "box").append(textBox);
  });
});

Answer 1

在每global-variable

之后有一个increment和click-event

＆＃13;

$(function() {
  var count = 0;
  $('.plusicon').on('click', function() {
    var textBox = '<input type="text" class="textbox"/>';
    var a = $(this).attr("id");
    $('#' + a + "box").append(textBox);
    $('#' + a + "box input:last").attr('id', 'id_' + count);
    ++count;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<br/>
<div id="plusicondivbox" class="insidediv"></div>

＆＃13;

或通过连接分配内联属性：

＆＃13;

$(function() {
  var count = 0;
  $('.plusicon').on('click', function() {
    var textBox = '<input type="text" id="id_' + count + '" class="textbox"/>';
    var a = $(this).attr("id");
    $('#' + a + "box").append(textBox);
    ++count;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<br/>
<div id="plusicondivbox" class="insidediv"></div>

＆＃13;

Answer 2

使用而不是$(this) $(textbox)

$(function () {
 $('.plusicon').on('click', function () {


    var textBox = '<input type="text" class="textbox"/>';
    var a = $(textBox).attr("id","your_id");

    $('#'+a+"box").append(textBox);


   });

Answer 3

请看下面的代码。我们可以定义全局计数器，每次按下加号按钮时都会递增，这样每次都会得到唯一的数字。我们可以用这个数字来定义唯一的文本框ID，如下所示：

＆＃13;

var textBoxCounter = 1;
$(function() {
  $('.plusicon').on('click', function() {


    var textBox = '<input type="text" class="textbox"/>';
    textBox = $(textBox);
    textBox.attr("id", "myTextBox_" + textBoxCounter);
    textBoxCounter++;
    var a = $(this).attr("id");

    $('#' + a + "box").append(textBox);

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />


<div id="plusicondivbox" class="insidediv " style="margin-top:53px;"></div>

＆＃13;

Answer 4

此代码适用于您，使用全局变量，它将为您的文本框提供dynamicid，即（动态文本框的不同ID）：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </script>
    <script>
        var idCount=0;
        $(function() {
            $('p').on('click', function() {
            var textBox = '<input type="text" class="textbox"/>';
            var a = $('<input>').attr("id","textBox"+idCount);
                $(textBoxDiv).append(a);
                idCount++;
            });
        });
    </script>
    </head>
    <body>
        <p>Click !</p>
        <div id="textBoxDiv" style="width:50%;height:50%">
        </div>
    </body>
</html>

Answer 5

我知道这个答案已被接受，但我不喜欢使用全局变量来增加动态添加id的计数 - 当有一个更简洁的方法在函数中使用它的长度.textbox元素。请注意，这将为每次单击图像时递增的id提供零索引编号，因为每次添加文本框时.textbox类的长度增加1.我已将console.log放入那里展示了不断增加的数量：

  $('.plusicon').on('click', function() {
    var textBox = '<input type="text" class="textbox"/>';
    var textboxLength = $('.textbox').length;
    $('#plusicondivbox').append(textBox);  
    $('.textbox:last').attr('id', 'id_' + textboxLength);
  console.log('id_' + textboxLength);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />

<div id="plusicondivbox" class="insidediv " style="margin-top:53px;"></div>

如何为单击的文本框创建不同的数据ID

5 个答案: