Question

我想在每次点击按钮时使用Jquery创建唯一ID。实际上我通过点击按钮在这里创建文件字段我需要第一个文件字段的id将保持不变（i.e-fileid）as当用户点击一个按钮并创建下一个文件字段时，id将会改变（i.d-fileid1），依此类推。我正在解释下面的代码。

<div class="col-md-6 bannerimagefile bmargindiv1">
<label for="expcerti" accesskey="B"><span class="required">*</span> Publication/Papers Upload your publication/papers certificate.</label>
<ol id="expOl">
   <li>
     <div class="totalaligndiv">
     <div class="col-md-10 padding-zero bannerimagefilenew bmargindiv1">
         <input type="file" class="filestyle" data-size="lg" name="expcerti" id="expcerti" />
    </div><div class="col-md-2 padding-zero bmargindiv1">
   <button type="button" class="btn btn-success btn-sm " id="Expadd">+</button>
         <button type="button" class="btn btn-danger btn-sm" id="Expminus" style="display:none;" >-</button>
  </div>
 <div class="clearfix"></div>
     </div>
   </li>
</ol>                                    
 </div>


<script>
$(document).ready(function () {
         $(document).on('click','.btn-success', function () {
           // var i=1;
             $.getScript("js/bootstrap-filestyle.min.js");
             $('#expOl').append("<li><div class='totalaligndiv'><div class='col-md-10 padding-zero bannerimagefilenew bmargindiv1'><input type='file' class='filestyle' data-size='lg' name='expcerti' ></div><div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm ' id='Expadd'>+</button><button type='button' class='btn btn-danger btn-sm' id='minus' style='display:none'>-</button></div><div class='clearfix'></div></div></li>");
            // $('.filestyle').attr("id","expcerti"+i);
             $(this).css('display', 'none');
             $(this).siblings("button.btn-danger").css('display', 'block');
             // i++;
         });
         $(document).on('click','.btn-danger', function () {
             console.log('delete');
             $(this).closest("li").remove();
         });
     });
</script>

检查上面的代码第一个文件字段的ID是expcerti，当创建一个新的时，它应该是expcerti1，并且像这样它会增加。所以如果我有5个字段我可以在各自的字段中添加5个文件。但在我的情况下，如果我有更多的文件字段，则所有文件都附加一个文件字段。请帮我解决这个问题。

Answer 1

要在每次点击时生成新ID，请保留计数器标记。

让我们说var i = 1;

每次点击i++都会增加此计数器。

将此计数器变量与id属性一起使用。

修改了您的代码段，如下所示：

$(document).ready(function () {
    var i=1;
     $(document).on('click','.btn-success', function () {

         $.getScript("js/bootstrap-filestyle.min.js");
         $('#expOl').append("<li><div class='totalaligndiv'><div class='col-md-10 padding-zero bannerimagefilenew bmargindiv1'><input type='file' class='filestyle' data-size='lg' name='expcerti' id='expcerti"+i+"' ></div><div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm ' id='Expadd'>+</button><button type='button' class='btn btn-danger btn-sm' id='minus' style='display:none'>-</button></div><div class='clearfix'></div></div></li>");
        // $('.filestyle').attr("id","expcerti"+i);
         $(this).css('display', 'none');
         $(this).siblings("button.btn-danger").css('display', 'block');
         i++;
     });
     $(document).on('click','.btn-danger', function () {
         console.log('delete');
         $(this).closest("li").remove();
     });
});

Answer 2

您必须将click事件侦听器添加到新创建的按钮中。

使用Jquery / Javascript在每次单击按钮时创建唯一ID

2 个答案: