用于加载更多内容的Jquery代码无效

时间:2017-09-22 09:53:55

标签: javascript jquery html css

我有20个同班同学。 我想在页面加载时显示前3个div然后当点击加载更多它将显示另外5个等等。 我从互联网上获得了一些基本代码但未能实现这些代码。

var size_item = $('.listing').length();
var v=3;
$('.listing:lt('+v+')').show();
$('#load_more').click(function () {
    v= (v+5 <= size_item) ? v+5 : size_item;
    $('.listing:lt('+v+')').show();
});

我给你的小提琴代码DEMO

2 个答案:

答案 0 :(得分:2)

&#13;
&#13;
  // Add a handler for statically served content
  ResourceHandler resourceHandler = new ResourceHandler();
  resourceHandler.setAcceptRanges(true);
  resourceHandler.setResourceBase("content");

  // Create a content handler, add the above resource handler and add a mime type for mp4
  ContextHandler context = new ContextHandler("/");
  context.setHandler(resourceHandler);
  MimeTypes mimeTypes = new MimeTypes();
  mimeTypes.addMimeMapping("mp4", "video/mp4");
  context.setMimeTypes(mimeTypes);

  HandlerList handlers = new HandlerList();
  handlers.addHandler(context);

  // This handle will deal with unhandled requests in the server. For requests for favicon.ico, the Jetty icon is served. 
  // For all other requests a normal 404 is served.
  handlers.addHandler(new DefaultHandler());
&#13;
$(document).ready(function(){   
  //show more option
    var size_item = $('.listing').length;
    var v=3;
    $('.listing').hide(); // hide all divs with class `listing`
    $('.listing:lt('+v+')').show();
    $('#load_more').click(function () {
        v= (v+5 <= size_item) ? v+5 : size_item;
        $('.listing:lt('+v+')').show();
        // hide load more button if all items are visible
        if($(".listing:visible").length >= size_item ){ $("#load_more").hide(); }
    });
});
&#13;
.listing{
  color:red;
  border:2px solid black;
  padding:12px;
  margin:8px;
}
.listing:hover{
  background-color:black;
  color:magenta;
}
#load_more{
  color:green;
  background-color:white;
  cursor:pointer;
  margin-top:20px;
  margin-bottom:20px;
}
#load_more:hover{
  color:red;
}
&#13;
&#13;
&#13;

你快到了。只是一些变化:

  1. 长度不是将<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="listing"> text here 1 </div> <div class="listing"> text here 2 </div> <div class="listing"> text here 3 </div> <div class="listing"> text here 4 </div> <div class="listing"> text here 5 </div> <div class="listing"> text here 6 </div> <div class="listing"> text here 7 </div> <div class="listing"> text here 8 </div> <div class="listing"> text here 9 </div> <div class="listing"> text here 10 </div> <div class="listing"> text here 11 </div> <div class="listing"> text here 12 </div> <div class="listing"> text here 13 </div> <div class="listing"> text here 14 </div> <div class="listing"> text here 15 </div> <div class="listing"> text here 16 </div> <div class="listing"> text here 17 </div> <div class="listing"> text here 18 </div> <div class="listing"> text here 19 </div> <div class="listing"> text here 20 </div> <div class="listing"> text here 21 </div> <div class="listing"> text here 22 </div> <div class="listing"> text here 23 </div> <div class="listing"> text here 24 </div> <div class="listing"> text here 25 </div> <div class="listing"> text here 26 </div> <div id="load_more"> <center> Load More </center> </div>更改为length()

  2. 的功能
  3. 最初应隐藏所有length,因此会添加代码divs,这会隐藏所有带有$('.listing').hide();个字体的div,然后点击listing 5将显示新项目。

  4. 加载20个或更多项后,加载更多按钮将被隐藏。 (通过检查可见项目的长度来实现)

答案 1 :(得分:0)

org.hibernate.TransientPropertyValueException: object references an unsaved transient instance - save the transient instance before flushing : com.erp.hospitality.domain.MotoPaymentOrder.customer -> com.erp.core.domain.common.Customer
    at org.hibernate.engine.spi.CascadingActions$8.noCascade(CascadingActions.java:379)
    at org.hibernate.engine.internal.Cascade.cascade(Cascade.java:126)
    at org.hibernate.event.internal.AbstractFlushingEventListener.cascadeOnFlush(AbstractFlushingEventListener.java:150)
    at org.hibernate.event.internal.AbstractFlushingEventListener.prepareEntityFlushes(AbstractFlushingEventListener.java:141)
    at org.hibernate.event.internal.AbstractFlushingEventListener.flushEverythingToExecutions(AbstractFlushingEventListener.java:74)
    at org.hibernate.event.internal.DefaultFlushEventListener.onFlush(DefaultFlushEventListener.java:38)
    at org.hibernate.internal.SessionImpl.flush(SessionImpl.java:1282)
    at org.hibernate.jpa.spi.AbstractEntityManagerImpl.flush(AbstractEntityManagerImpl.java:1300)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)