如何创建不同的数据id的文本框这是得到点击

how to create different data id for text box which is getting on click

本文关键字：文本 id 数据 何创建 创建      更新时间：2023-09-26

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

的代码

$(function() {
  $('.plusicon').on('click', function() {
    var textBox = '<input type="text" class="textbox"/>';
    var a = $(this).attr("id");
    $('#' + a + "box").append(textBox);
  });
});
<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" />//for clickbutton//
<div id="plusicondivbox" class="insidediv " style="margin-top:-53px;"></div>//div for adding txtbox//

每个click-event后面都有一个global-variable和increment 

$(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;
  });
});
<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>

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

$(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;
  });
});
<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>

用$(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);

   });

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

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);
  });
});
<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>

这段代码将为您工作，使用全局变量，它将为您的文本框提供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>

我知道这个答案已经被接受了，但是我不喜欢使用全局变量来增加动态添加的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>

相关文章：