动态阅读更多链接不工作在Chrome


Dynamic read more link not working in Chrome

所以我一直在为我的网站开发一个新的博客系统,我希望最终可以打包为免费下载。我有动态阅读更多/更少的链接,在IE和Firefox中完美工作,但不是Chrome;该列表中的最后一个浏览器显示的条目没有渐变效果,不隐藏摘要跨度并忽略无读链接。

下面是我的代码。我使用jQuery 1.7.0。提前谢谢你,任何能给我正确答案的人都会在我的博客上提到。谢谢你的帮助

<script type="text/javascript">
function readMore(entNo)
{
    $("#entSum" + entNo).fadeOut(function()
    {
        $("#ent" + entNo).fadeIn();
    });
function readLess(entNo)
{
    $("#ent" + entNo).fadeOut(function()
    {
        $("#entSum" + entNo).fadeIn();
    });
}
function loadPage(startNo,endNo)
{
    $("#blogLoad").fadeOut(function()
    {
            $.ajax(
            {
                url: "getBlog.php",
                type: "GET",
                data: {start: startNo, end: endNo},
                success: function(data)
                {
                    $("#blogLoad").html(data);
                    $(".ent").hide();
                    $("#blogLoad").fadeIn();
                }
            });
    });
}
function facebookShare(id)
{
    window.open("http://www.facebook.com/sharer.php?u=http://jamesswright.co.uk/blog.php?id=" + id + "&t=James S. Wright| Blog", "ShareOnFacebook", "width=600,height=400,scrollbars=yes,location=no,status=no,screenx=" + ((screen.width / 2) - 300) + ",screeny=" + ((screen.height / 2) - 200));
}
function twitterShare(id)
{
    window.open("http://twitter.com/share?url=http://jamesswright.co.uk/blog.php?id=" + id + "&text=Cool blog from James Wright: &via=JamesSWrightWeb", "Twitter", "width=600,height=400,scrollbars=yes, location=no, status=no, screenx=" + ((screen.width / 2) - 300) + ", screeny=" + ((screen.height / 2) - 200));
}
</script>
<?php
$start;
$end;
if($_GET["start"] == NULL) $start = 0;
else $start = $_GET["start"];
if($_GET["end"] == NULL) $end = 5;
else $end = $_GET["end"];

$connection = mysql_connect("localhost", "jamwri9_sql", "******");
if(!$connection) echo "<p><b>Could not retrieve banner data: database connection failed";
mysql_select_db("jamwri9_sql", $connection);
$query;
$totalRows;
if($_GET["id"] == NULL)
{
    $query = mysql_query("SELECT ID, Title, Date, Entry FROM jswBlog ORDER BY ID DESC LIMIT " . $start . ", " . $end);
    $totalRows = mysql_num_rows(mysql_query("SELECT ID FROM jswBlog"));
}
else $query = mysql_query("SELECT Title, Date, Entry FROM jswBlog WHERE ID = " . $_GET["id"] . " ORDER BY ID");
$rows = mysql_num_rows($query);

$i = 0;
for($i; $i < $rows; $i++)
{
    echo "<p class='"title'">". mysql_result($query, $i, 'Title') . "</p><p>Posted " . mysql_result($query, $i, 'Date') . "</p>";
    if(strlen(mysql_result($query, $i, 'Entry')) > 250 && $_GET["id"] == NULL) echo "<span id='"entSum" . $i . "'"><p>" . substr(mysql_result($query, $i, 'Entry'), 0, 250) . "... | <a href='"javascript:void(0)'" onclick='"readMore(" . $i . ")'">read more >></a></p></span><span id='"ent" . $i . "'" class='"ent'"><p>" . mysql_result($query, $i, 'Entry') . " | <a href='"javascript:void(0)'" onclick='"readLess(" . $i . ")'"><< read less</a></p></span>";
    else echo "<p>" . mysql_result($query, $i, 'Entry') . "</p>";
    echo "<p>Share: <a href='"javascript:void(0)'" onclick='"facebookShare(" . mysql_result($query, $i, 'ID') . ")'"><img src='"img/facebook.png'" style='"vertical-align: middle;'" /></a> <a href='"javascript:void(0)'" onclick='"twitterShare(" . mysql_result($query, $i, 'ID') . ")'"><img src='"img/twitter.png'" style='"vertical-align: middle;'" /></a> <input type'"text'" value='"http://jamesswright.co.uk/blog.php?id=" . mysql_result($query, $i, 'ID') . "'" /></p><hr />";
}
if($_GET["id"] == NULL)
{
    echo "<p>Page: ";
    $pages = $totalRows / 5;
    $j = 0;
    $startNo = 0;
    $endNo = 5;
    for($j; $j < $pages; $j++)
    {
        echo "<a href='"javascript:void(0)'" onclick='"loadPage(" . $startNo . "," . $endNo . ")'">" . ($j + 1) . "</a>";
        if($j < $pages - 1) echo "|";
        $startNo += 5;
        $endNo += 5;
    }
    echo "</p>";
}
else echo "<a href='"blog.php'">View all blog entries</a>";
?>

只是想让你知道,我解决了这个问题。出于某种原因,所有版本的谷歌Chrome(我的版本是18.0.1025.162)发布在这个答案发布的时候不支持<span>元素被jQuery改变的可见性(没有尝试手动JavaScript,然而,所以也许这是一种可能性)。

很简单,我用<div> s替换了包含博客条目数据的<span>元素。问题解决了。

如果你感兴趣的话,可以在这里找到这个博客。我将进一步改进它,并希望最终将软件作为开源免费发布。

我不确定这是否是问题,但根据文档fadeOut()duration作为第一个参数,并将回调作为第二个参数。

尝试将持续时间作为第一个参数-如"slow","fast"或400(毫秒数),并将回调函数作为第二个参数传递。

:

function readMore(entNo)
{
    $("#entSum" + entNo).fadeOut("fast", function()
    {
        $("#ent" + entNo).fadeIn("fast");
    });
}