加载更多按钮位置总是离加载的位置太远答案

【问题标题】：load more button position always too far down from what it is loading加载更多按钮位置总是离加载的位置太远
【发布时间】：2016-02-27 13:51:53
【问题描述】：

我有一个加载更多按钮，在点击时加载 10 个新的隐藏 div，问题是我有 40 个隐藏的 div，并且按钮设置在 40 个 div 的末尾，即使它们被隐藏，我只想要它的位置直接位于显示的最后一个 div 下，因此当您单击它时，它应该加载 10 个更多隐藏的 div 并直接向下设置在最后一个新显示的 div 下。有任何想法吗？

这里是 html 代码（不是应该在按钮单击时显示的隐藏 div 是 's 的 div：

<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="leb news.css">

<title> leb news</title>
</head>
<div class="all" dir="rtl" lang="ar">
<body>

<div class="header">
<h1>

有什么好说的

<img  src="paper.gif" alt="paper" height="115" />

LebNews

</h1>
</div>
<div class="clockall">
<div class="clock">
<div class="list">
<TABLE id="T_Menu" height="100%" cellSpacing="0" cellPadding="0" width="181" border="0" style="float: right">
                            <TD height="100%" vAlign="top" rowSpan="2" width="181" align="center">
<TABLE id="T_Menu" height="100%" cellSpacing="0" cellPadding="0" width="181" border="0">
<TR>
    <TD style="BACKGROUND-IMAGE: url(Images/Menu/bgd.gif); BACKGROUND-ATTACHMENT: fixed; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left top"
        vAlign="top" align="center" bgColor="transparent" height="100%">     <TABLE id="T_Menu" cellSpacing="0" cellPadding="0" width="80%" border="0">
            <TR>
                <TD vAlign="middle" align="center" height="100"><BR>
                    &nbsp;&nbsp;</TD>
            </TR>
            <TR>
                <TD></TD>
            </TR>
            <TR>
                <TD align="center"><table cellspacing="0" rules="all" border="1" id="Menu1_Ad_menu" style="border-collapse:collapse;">
<tr align="Center" style="color:#ffa500;background-color:#ffa500;border-width:0px;border-style:Groove;font-family:Trebuchet MS;font-size:12pt;font-weight:bold;">
    <td>
                                <input type="submit" name="Menu1:Ad_menu:_ctl1:ad_button" value="الرئيسية" id="Menu1_Ad_menu__ctl1_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" /> 
                                </td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
    <td>
                                    <input type="submit" name="Menu1:Ad_menu:_ctl2:ad_button" value="اخبار" id="Menu1_Ad_menu__ctl2_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
                                </td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
    <td>
                                    <input type="submit" name="Menu1:Ad_menu:_ctl3:ad_button" value="فن" id="Menu1_Ad_menu__ctl3_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
                                </td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
    <td>
                                    <input type="submit" name="Menu1:Ad_menu:_ctl4:ad_button" value="رياضة" id="Menu1_Ad_menu__ctl4_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
                                </td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
    <td>
                                    <input type="submit" name="Menu1:Ad_menu:_ctl5:ad_button" value="أدب" id="Menu1_Ad_menu__ctl5_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
                                </td>
    </tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
    <td>

  </table>
</table>
</table>
</table>
</div>
<div class="article" align="right" style="display: inline-block;" > 
<br>
<div class="27" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="28" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="29" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="30" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
 </a>
 </article>
 </div>
<br>
<br>
<br>
<div class="31" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="32" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2" >
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="33" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="34" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<div class="button">
<button type="button" name="more" id="load">More</button>

</div>

</body>

</html>

这里是按钮的jquery：

$(document).ready(function(){
$("div").slice(0, 14).show(); // select the first ten
$("#load").click(function(e){ // click event for load more
    e.preventDefault();
   $("div:hidden").slice(0, 10).show();
      // select next 10 hidden divs and show them
    if($("div:hidden").length == 0){ // check if any hidden divs still exist
       alert("No more divs"); // alert if there are none left

    }
});
})

和css：

 html { 
 background: url(32784_FLS_W01.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

.header h1{
position: absolute;
/*background-color:#C63D0F; */
background-color:transparent;
padding:50px;
padding-left:250px;
padding-right:200px;
margin-left:65px;
margin-right:65px; 
font-size:80px;



 /*  vertical-align: top; */

}
.all {
width: 1370px;
/*height: auto;*/


}

.list {

上边距：0px； padding-right:65px;

}


.article img{
height:150px;
width:150px;
border:"5";


 }
.article p{
width:800px;
height:65px;
font-size:16pt;
color:black;
text-decoration: none;
}
.article{
padding-top:0px;
/*overflow:hidden;*/

}

ul #mylist li{ list-style-type: none;
}
#mylist li{display:none;}
ul #mylist li img{
height:150px;
width:150px;
border="5";
}


#load {
/*  position: fixed; */
height: 30px; 

width: 100%; 
margin-top:0px;
overflow:hidden;

}

我确实在 css 中尝试了太多东西以使其工作，但它似乎应该在 jquery 或 javascript 中工作。希望有人能提供帮助。

非常感谢。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

https://jsfiddle.net/x3azn/3u46oh39/4/

工作示例，我想不到，你的课

<div class=<missing quote>button">
<button type="button" name="more" id="load">More</button>

</div>

没有引用，但除此之外您应该发布真实代码

【讨论】：

无论如何我都没有使用这个类，所以缺少的 " 与解决方案无关，谢谢。

【解决方案2】：

我刚试了你的代码，没有错，可能不是这一行

$("div:hidden").slice(0, 10).show();

你可以试试这个

 $("div:hidden").slice(0, 10).css('display','block');

如果这不起作用，您可以尝试粘贴所有 CSS，我可以检查一下有什么问题，可能是另一个类干扰了您的按钮。祝你好运

【讨论】：

没有不起作用，显示的最后一个 div 和按钮之间仍有空间。生病显示我所有的 css，但恐怕我也在 html 中设置样式，所以它可能是 css 中没有的东西。生病编辑我的帖子并放置整个代码。
我编辑了我的帖子，现在它有所有的代码请检查一下
如果您有任何想法无法解决并且周围没有任何答案，请帮助我，我拿了隐藏 div 和按钮的代码并单独尝试并遇到了同样的问题，问题与外界无关。
如果您决定通过 CSS 而不是通过 HTML 中的样式来解决所有问题，那么解决方案可能很简单。相信我，这真的很容易。这就是你可以做的...... 1）在css中创建一个隐藏元素的类...... 2）当点击按钮时，将该类分配给接下来的10个div。很简单，css 或 HTML 中的任何内容都不会影响按钮。试试看。
所以我应该从每篇文章中删除非显示并放置包含所有文章的潜水并将其类的显示放在 css 中>