javascript - 加载更多按钮位置总是离加载的内容太远

标签 javascript jquery html css

我有一个加载更多按钮，可以在单击时加载 10 个新的隐藏 div，问题是我有 40 个隐藏 div，并且按钮设置在 40's 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 中工作。希望有人能帮忙。

非常感谢。

最佳答案

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

工作样本，我的头脑，你的课

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

</div>

没有引用，但除此之外你应该发布真正的代码

关于javascript - 加载更多按钮位置总是离加载的内容太远，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35665491/

上一篇：php - 删除内联样式php中的样式宽度图像

下一篇：css - 文本重叠容器并在垂直移动 View 中位于第二页

相关文章：

javascript - 图表 D3js + Extjs 面板

javascript - 使用 jQuery Validate 并尝试在标签无效时突出显示标签

javascript - jQuery 或 Javascript 如何查找 Rails 表单中的复选框是否已选中并删除表单 div

html - 使用浏览器的主滚动条滚动特定的 DIV 内容

html - 附件的 CSS 样式 - 自动在文本前显示图标

javascript - 在 Javascript 中拥有可见的 Google Drive API key 是否安全？

javascript - WebStorm : Failed to list gulp tasks 中的 Gulp 错误

javascript - 如何在 codeigniter 中验证登录弹出模式

javascript - jQuery - aria-controls vs data attributes to identify/select DOM element - 哪个是首选方法？

javascript - 通过 DRAGGABLE 将一个 DIV 移动到另一个 DIV 下？(CSS，JQuery)

©2024 IT工具网  联系我们