Question

我有一张幻灯片，其中显示了4个属性图像及其描述，这些图像附加在$ .each循环中。但是现在，我只有8个结果显示在滑块中。

问题是，当成功显示结果时，幻灯片将变为空白，但我希望在完成结果幻灯片后停止这些幻灯片。

这是我的ajax回复

jQuery.ajax({
           type:'POST',
           url:'<?php echo base_url("site/landing/get_work_places"); ?>',
           data:{ city_name:city},
           dataType: 'json', 

           success:function(data)
           {

                     var ParsedObject = JSON.stringify(data);  

                     var json = $.parseJSON(ParsedObject);

               if (json=="")
               {
                  $('#work_hider').hide();

                      // alert("no results found");
               }else
               {                  

                   $.each(json, function(key, data) 
                     {
                       // All the variables from the database containing the post data.
                          var product_id=data.product_id;
                          var product_name=data.product_title;
                           var product_image=data.product_image;
                           var work_price = data.price_perhour;
                           var work_address = data.address;

                         // $("#work_property").append('<li class="span3"><div class="thumbnail"><a href="<?php //echo base_url('rental'); ?>/'+product_id+'"><img src="'+product_image+'" alt=""></a></div><div class="caption"><h4>'+product_name+'</h4>  <p>Property Description</p></div></li>');

                         $("#work-carousel").append('<li class="span3"><div class="thumbnail"><a href="<?php echo base_url('rental'); ?>/'+product_id+'"><img src="'+product_image+'" alt=""></a></div><div class="caption"><h2>'+work_price+'</h2></div><div class="caption"><h4>'+product_name+'</h4>  <p>'+work_address+'</p></div></li>');



                      });

                    for (i = 0; i <= $('.span3').length / 4; i++) {
                    $('.span3').slice(i * 4, (i + 1) * 4).wrapAll('<div class="item"><ul id="work_property">');
                  }


              }
           }
          });

          // slider ajax ends

        });

这是滑块HTML滑块代码

    <div class="work_carousel slide" id="myCarousel">
        <div class="carousel-inner" id="work-carousel">
            <div class="item active">
                    <ul class="thumbnails" id="work_property">


                    </ul>
              </div>

        </div>

        <div class="control-box" style="margin-bottom: 2em;">                            
            <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
            <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
        </div>

    </div>

</div>      
</div>
</div>

以下是滑块的图片及其结果

这是滑块的图片，结果为

注意： 1幻灯片= 4结果图片，我在SQL查询中有8个结果的固定限制，所以我想只运行2张幻灯片，然后停止这些幻灯片。

请告诉我如何在完成结果后停止这些幻灯片，谢谢：）

Answer 1

var imgs = $.parseJSON(ParsedObject);
var sliderStr = '';

for(let i = 0,l = imgs.length; i<l;i+=4) {
    sliderStr = '<ul>'+ 
                   renderImgItem(imgs[i]) +
                   renderImgItem(imgs[i+1]) +
                   renderImgItem(imgs[i+2]) +
                   renderImgItem(imgs[i+3]) +
                '</ul>';
}

$('#work_property').html(str);

function renderImgItem(img) {
    // return <li> string
}

不推荐在循环中操作DOM。更好的方法是在循环中创建Dom字符串，并在循环后附加到DOM。

Answer 2

$.ajax({
    ...
    success: function() {
         var ParsedObject = JSON.stringify(data);  
         var imgs = $.parseJSON(ParsedObject);

         if(imgs.length) {
               alert('no imgs');
         } else {
               var sliderStr = '';

              for(let i = 0,l = imgs.length; i<l;i+=4) {
                  sliderStr = '<ul>'+ 
                                  renderImgItem(imgs[i]) +
                                  renderImgItem(imgs[i+1]) +
                                  renderImgItem(imgs[i+2]) +
                                  renderImgItem(imgs[i+3]) +
                              '</ul>';
               }

               $('#work_property').html(str);
         }
    }
})

function renderImgItem(img) {
    // return <li> string
}

看起来像这样

如何在结果完成后停止滑块$ .each循环

2 个答案: