Question

我正在使用Jquery动态创建一些输入字段，但需要在创建时分配值。我在下面解释我的代码。

<input type="hidden" id="alldepdates" value="1,2,3,4">
<ul class="date_list input_fields_wrap">
<li><input type="text" name="ddates" id="ddates" value="1" readonly >
<a href="#" id="addbtn"><span style="margin-left:5px;min-width:20px;"><i class="fa fa-arrow-circle-down" style="font-size:18px;"></i></span></a><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>
</ul>

在这里，我在隐藏的输入字段中有一些逗号分隔的字符串值，并且该逗号分隔的字符串的第一个元素显示在只读字段中。

 <script>
    $(function(){ 
        var wrapper = $(".input_fields_wrap");
        var addButton = $("#addbtn");
        $(addButton).click(function(){
           var alld=$("#alldepdates").val();
           var alldsplit=alld.split(",");
           var restArr=alldsplit.shift();
           if(restArr.length > 0){
               $(wrapper).append("<li><input type="text" name="ddates" id="ddates" value="+restArr[0]+" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>");                                                      

$("#alldepdates").val(restArr.join(","));
          };
    });
    })
    </script>;

这里我需要的是，当用户单击down-arraow图标时，将创建一个新字段，并且该逗号分隔的字符串的第一个值将始终分配给新字段，而当所有值都将被分配时，则不会再创建任何字段

Answer 1

您没有正确设置 htmlString 的格式。应该是：

'<li><input type="text" name="ddates" id="ddates" value="'+alldsplit[0]+'" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>'

尽管我更喜欢使用Template Literals，它允许嵌入表达式。

要将事件附加到动态创建的元素上，必须使用on()。

$(function(){ 
  var wrapper = $(".input_fields_wrap");
  $('body').on('click', 'a', function(){
     var alld=$("#alldepdates").val();
     var alldsplit=alld.split(",");
     alldsplit.shift();
     if(alldsplit.length > 0){
         $(wrapper).append(`<li><input type="text" name="ddates" id="ddates" value="${alldsplit[0]}" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>`);                                                            $("#alldepdates").val(alldsplit.join(","));
    };
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="alldepdates" value="1,2,3,4">
<ul class="date_list input_fields_wrap">
<li><input type="text" name="ddates" id="ddates" value="1" readonly >
<a href="#" id="addbtn"><span style="margin-left:5px;min-width:20px;"><i class="fa fa-arrow-circle-down" style="font-size:18px;"></i></span></a><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>
</ul>

Answer 2

$(document).on('click', "#addbtn", function() {
   var alld=$("#alldepdates").val();
   var alldsplit=alld.split(",");
   var restArr=alldsplit.shift();
   if(restArr.length > 0){
       $(wrapper).append('<li><input type="text" name="ddates" id="ddates" value="'+restArr[0]+'" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>');                                                           
       $("#alldepdates").val(alldsplit.join());
  };

Answer 3

您可以轻松做到。您只需要知道array.shift会删除并返回数组的第一个元素。

$(function () {
  var wrapper = $('.input_fields_wrap');
  var addButton = $('#addbtn');

  $(addButton).click(function () {
    var alld = $('#alldepdates').val();
    var alldsplit = alld.split(',');
    var removedArrayElement = alldsplit.shift();
    if (alldsplit.length > 0) {

      var inputMarkup = '<input type="text" name="ddates" id="ddates_' + alldsplit.length + '" value="' + removedArrayElement + '" readonly />';
      var anchorMarkup = '<a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a>';

      $(wrapper).append('<li>' + inputMarkup + anchorMarkup + '</li>');

      $("#alldepdates").val(alldsplit.join(','));
    };
  });
});

如何使用javascript / Jquery

3 个答案: