如何使用循環內附加jQuery功能

Question

我想追加一個新的html代碼，購買點擊一個按鈕。然而在附件中有一個循環來顯示html代碼。

<script> 
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; 
$(".add_schedule").click(function() { 
       if ($('.day-part').is(':empty')){ 
        alert("You have limit schedule time!") 
       }else{ 
        var stack = $(this).parent().find('#stack').val(); 
        alert("form-schedule-"+stack); 
        $(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' + 
         '<div class="col-md-4">' + 
         '<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' + 
         '</div>' + 
         '<div class="col-md-4">' + 
         '<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' + 
         '<div class="col-md-4">' + 
         '<label>Pilih Hari</label> ' + 
         '<div class="dropdown dropdown-payment">' + 
         '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' + 
         '<div class="dropdown-menu"><div class="everyday-part">' + 
         '<li> <label> ' + 
         '<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' + 
         '</li>' + 
         '</div>' + 
         '<div class="day-part">'+ 

     // The Problem is Started From Here 
         $.each(day_left,function (i,val) { 
          $('<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>'); 
         })+'</div> </div> </div> </div></div><div class="clearfix"></div><br> '); 


     // End Of the Problem 

        stack = parseInt(stack)+1; 



        $(this).parent().find('#stack').val(stack); 

       } 


      }); 
</script> 

實際上我可以附加html。但有一個錯誤在我的$.each(day_left,function(i,val)){});

它的唯一返回值爲day_left他們就像sunday,monday,...。代碼並不顯示html代碼

我的期望是，將這樣的

返回，但我的代碼只返回：

Answer 1

請這樣

功能

function makeString(day_left,stack){ 
       var str = ''; 
       for(var i = 0; i <= day_left.length ; i++){ 
       str += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+day_left[i]+'</label> </li>'; 
       } 
       return str; 
      } 

以下更改

$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' + 
        '<div class="col-md-4">' + 
        '<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' + 
        '</div>' + 
        '<div class="col-md-4">' + 
        '<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' + 
        '<div class="col-md-4">' + 
        '<label>Pilih Hari</label> ' + 
        '<div class="dropdown dropdown-payment">' + 
        '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' + 
        '<div class="dropdown-menu"><div class="everyday-part">' + 
        '<li> <label> ' + 
        '<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' + 
        '</li>' + 
        '</div>' + 
        '<div class="day-part">'+ 

    // The Problem is Started From Here 
        makeString(day_left,stack)+'</div> </div> </div> </div></div><div class="clearfix"></div><br> '); 

plnkr https://plnkr.co/edit/aBLj49Yv2g4EakeKjlqI?p=preview

Answer 2

，你可以做這樣的...... 只使用返回功能，或讓你迭代退貨。

<script> 
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; 
$(".add_schedule").click(function() { 
       if ($('.day-part').is(':empty')){ 
        alert("You have limit schedule time!") 
       }else{ 
        var stack = $(this).parent().find('#stack').val(); 
        alert("form-schedule-"+stack); 
        $(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' + 
         '<div class="col-md-4">' + 
         '<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' + 
         '</div>' + 
         '<div class="col-md-4">' + 
         '<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' + 
         '<div class="col-md-4">' + 
         '<label>Pilih Hari</label> ' + 
         '<div class="dropdown dropdown-payment">' + 
         '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' + 
         '<div class="dropdown-menu"><div class="everyday-part">' + 
         '<li> <label> ' + 
         '<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' + 
         '</li>' + 
         '</div>' + 
         '<div class="day-part">'+ 

     // The Problem is Solved 
      function(){var s=''; 
     $.each(day_left,function (i,val) { 
          s += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>'; 
         }); 
       return s;} 
+'</div> </div> </div> </div></div><div class="clearfix"></div><br> '); 


     // End Of the Problem 

        stack = parseInt(stack)+1; 



        $(this).parent().find('#stack').val(stack); 

       } 


      }); 
</script>