Question

我正在使用下面的脚本，但它不适用于我的脚本想要在3个盒子后保持限制3个盒子如果用户想要更多他必须点击加载更多链接我给了一个实时链接看我想加载更多对于那些盒子或任何新的代码加载更多jsut给我？

  <ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}

我想为此工作，但我无法获得

 <div class="row carousel-row lss">
        <div class="col-xs-8 col-xs-offset-2 slide-row">
            <div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators lsse">
                <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-1" data-slide-to="1"></li>
                <li data-target="#carousel-1" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                    <img src="http://lorempixel.com/150/150?rand=1" alt="Image">
                </div>
                <div class="item">
                    <img src="http://lorempixel.com/150/150?rand=2" alt="Image">
                </div>
                <div class="item">
                    <img src="http://lorempixel.com/150/150?rand=3" alt="Image">
                </div>
              </div>
            </div>
            <div class="slide-content">
                <h4>Example product</h4>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
                </p>
            </div>
            <div class="slide-footer">
                <span class="pull-right buttons">
                      <button class="btn btn-sm btn-info" onclick="relocateTo('jobtitle.html')"><i class="fa fa-fw fa-eye"></i>View Job</button>

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

实时网址：click here to see

Answer 1

快速浏览一下，我可以看到JS中的一些错误。 Javascript变量使用var语法创建，如var size_li = $("#myList li").size();或var x = 3。创建完成后，我们可以直接为它们分配值x = 4。

$(document).ready(function () {
    var size_li = $(".carousel-row").size();
    var x=3;
    $('.carousel-row:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('.carousel-row:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('.carousel-row').not(':lt('+x+')').hide();
    });
});

需要将#showMore和#showLess按钮添加到html中以触发点击功能，但我们现在正在定位.carousel-row以检查存在多少行。

使用jquery为内容加载更多脚本

1 个答案: