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

你可以这样做...... 只需使用return函数或使迭代可以返回。

 <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>

如何在jQuery函数中使用循环内部追加

2 个答案: