个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 10:42:59 25 4
gpt4 key购买 nike

我有一个加载更多按钮，可以在单击时加载 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/

25 4 0
文章推荐： linux - 时间 fmt 的 gnuplot 图不起作用
文章推荐： java - Appium - 查找元素不一致
文章推荐： java - Deltaspike 与 Java 9 兼容吗？
文章推荐： php - 删除内联样式php中的样式宽度图像
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com