加载更多按钮在引导程序4中不起作用

时间:2017-11-23 06:13:19

标签: javascript jquery css twitter-bootstrap

我有一个工作负载更多按钮使用bootstrap 3但是当我在bootstrap 4中转换我不再工作,它给了我很多麻烦,我甚至没有任何错误,当我检查源代码

这是我的html现在在bootstrap 4

<div class="tab-pane active" id="starter" role="tabpanel">

                                <ul class ="starter-list text-center" id ="starter-list">
                                </ul>


                                <div id="loadMore"><button class ="load-btn btn btn-default">SEE MORE PARTS & ACCESSORIES</button></div>
                          </div>

这是我以前在bootstrap 3中使用的js。

starter.forEach(function (current) {
          var legend     = current[0],
              imgSrc     = current[1],
              descript   = current[2],
              descript2   = current[3],
              descript3   = current[4],
              price      = current[5];
          $('ul.starter-list').append(`
            <li>
          <div class = "row">
              <div class="col col-md-12">
                <div class="acs-detail">
                  <legend>` + legend + `</legend>
                  <img src="` + imgSrc + `" class="veh-content img-responsive" />
                  <div class="pna-description col-md-10">
                    <ul>
                      <p>` + descript + `</p>
                      <p>` + descript2 + `</p>
                      <p>` + descript3 + `</p>
                    </ul>
                  </div>
                  <div class="pna-price ">
                    <div class="text-deco">
                      <span>` + price + `</span>
                    </div>
                    <div class="border img-responsive">
                      <span></span>
                    </div>
                  </div>
                </div>
              </div>
           </div> 
            </li>
          `);
        });


$(document).ready(function () {
   var size_li = $(".starter-list li").size();
    var x=6;
    $('.starter-list li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+3 <= size_li) ? x+3 : size_li;
        $('#starter-list li:lt('+x+')').show();

        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-3<0) ? 3 : x-3;
        $('#starter-list li').not(':lt('+x+')').hide();
        $('#loadMore').show();

    });
});

https://jsfiddle.net/zvgesa1x/

0 个答案:

没有答案