Question

我有以下脚本，它首先只向用户显示页面的第一段。当用户点击“Shw More”时，将显示其余内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
     <script language="javascript" type="text/javascript">
         $(function() {
             $("#someDiv p:not(:first)").hide();
             $("#someDiv p:first").after('<a id="show" href="#">Show more</a>');

             $("#show").click(function(evt) {
                 evt.preventDefault();
                 //window.location.reload(true);
                 $(this).hide();

                 $("#someDiv p").show();
             });

         });
</script>
</head>
<body>
<div id="someDiv">
<p>LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
</p>
<p>LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
</p>
<p>LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
</p>

</div>
</body>
</html>

以上由着名的DaveWard提供的代码工作得非常好。但是我现在想让这段代码与这行未注释

一起使用

window.location.reload(true);

当上面的行被取消注释时，有人能告诉我如何获得相同的结果。我想要在用户点击“ShowMore”时进行刷新。

另请注意，此jQuery代码将保存在单独的文件中，并用于多页面。页面网址采用http://www.xyz.com/displaynews?newsid=x

格式

Answer 1

要实现您想要的目标，您必须稍微改变策略，就像重新加载页面一样，您的JavaScript将从头开始（Web无状态，因此重新加载页面意味着失去您的状态）。

$("#show").click(function(evt) {
    evt.preventDefault();
    window.location = window.location + "#showmore";
}

使用此点击事件加载相同的页面，但带有一个标志或查询字符串，告诉您应该显示更多...

if (window.location.indexOf("#showmore") == -1) {
    $("#someDiv p:not(:first)").hide();
    $("#someDiv p:first").after('<a id="show" href="#">Show more</a>');
}

将隐藏代码包装在支票中以查看是否应该隐藏文本。

回发不会执行jQuery中的代码

1 个答案: