動態閱讀更多鏈接在Chrome中不起作用

Question

因此，我一直在為自己的網站開發新的博客系統，最終希望將其打包為免費下載。 我有動態閱讀的更多/更少鏈接，這些鏈接在IE和Firefox中完美運行，但在Chrome瀏覽器中卻沒有； 該列表中的最后一個瀏覽器顯示的條目沒有fadeIn效果，不會隱藏摘要范圍，並且會忽略“ readless”鏈接。

下面是我的代碼。 我正在使用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>";
?>

Answer 1

只是讓您知道，我解決了這個問題。 由於某些原因，發布此答案時發布的所有版本的Google Chrome瀏覽器（我的版本是18.0.1025.162）都不支持jQuery更改的<span>元素的可見性（但是，請不要嘗試使用手動JavaScript，所以也許這是可能的）。

很簡單，我將包含博客條目數據的<span>元素替換為<div> 。 問題解決了。

如果您有興趣，可以在此處找到該博客。 我將對其進行進一步的改進，並希望最終以開源形式免費發布該軟件。

Answer 2

我不確定這是否是問題，但是根據文檔 fadeOut()將duration作為第一個參數，並將回調作為第二個參數。

嘗試將持續時間作為第一個參數-例如“ slow”，“ fast”或400（毫秒），然后將回調函數作為第二個參數傳遞。

像這樣：

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