JQuery：更改內容<div>每 5 秒</div><div id="text_translate"><p>我已經使用 xml 和 xslt 設置了一個無線電廣播服務器。 我顯示當前正在播放的歌曲，但當然，每分鍾都會改變，所以我希望&lt;div&gt;每秒刷新一次，以確保顯示的數據是最新的。</p><p> 我寫了一個 JQuery function，但這不起作用。 另外，我寫了以下測試 function 來測試 jquery 是否有效，但它沒有。</p><p> 會不會是 jquery 在 XST 頁面中不起作用？</p><p> 測試 function：</p><pre> $(document).ready(function () { $("a").click(function () { alert("test"); }); });</pre><p> 單擊超鏈接時不顯示警報...</p><p> 這是我當前的代碼：</p><pre> &lt;xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" &gt; &lt;xsl:output omit-xml-declaration="no" method="html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" /&gt; &lt;xsl:template match = "/icestats" &gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"&gt; $(document).ready(function () { setInterval(function () { $(".newscontent").load("status.xsl"); }, 1000); }); &lt;/script&gt; &lt;script type="text/JavaScript"&gt; window.onload = startTime; function startTime() { var date = new Date(); var uur = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); if(min == 0 || min == 1 || min == 2 || min == 3 || min ==4 || min == 5 || min == 6 || min == 7 || min == 8 || min == 9) { min = "0" + min; } if(sec == 0 || sec == 1 || sec == 2 || sec == 3 || sec ==4 || sec == 5 || sec == 6 || sec == 7 || sec == 8 || sec == 9) { sec = "0" + sec; } var movingtime = uur + ":" + min + ":" + sec; document.getElementById('clock').innerHTML = movingtime; setTimeout('startTime()',500); } &lt;/script&gt; &lt;title&gt;Muziekserver&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;/head&gt; &lt;body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"&gt; &lt;h2&gt;Overzicht&lt;/h2&gt; &lt;br /&gt; &lt;.--index header menu --&gt; &lt;div class="roundcont"&gt; &lt;div class="roundtop"&gt; &lt;img src="/corner_topleft:jpg" class="corner" style="display. none" /&gt; &lt;/div&gt; &lt;table border="0" width="100%" id="table1" cellspacing="0" cellpadding="4"&gt; &lt;tr&gt; &lt;td bgcolor="#656565"&gt; &lt;a class="nav" href="admin/"&gt;Administratie&lt;/a&gt; &lt;a class="nav" href="status.xsl"&gt;Overzicht van muziek&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div class="roundbottom"&gt; &lt;img src="/corner_bottomleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;br /&gt; &lt;:--end index header menu --&gt; &lt;:--mount point stats--&gt; &lt;xsl.for-each select="source"&gt; &lt;xsl:choose&gt; &lt;xsl:when test="listeners"&gt; &lt;div class="roundcont"&gt; &lt;div class="roundtop"&gt; &lt;img src="/corner_topleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;div class="newscontent"&gt; &lt;div class="streamheader"&gt; &lt;table cellspacing="0" cellpadding="0"&gt; &lt;colgroup align="left" /&gt; &lt;colgroup align="right" width="300" /&gt; &lt;tr&gt; &lt;td&gt;&lt;h3&gt;Naam: &lt;xsl.value-of select="@mount" /&gt;&lt;/h3&gt;&lt;/td&gt; &lt;xsl:choose&gt; &lt;xsl:when test="authenticator"&gt; &lt;td align="right"&gt;&lt;a class="auth" href="/auth.xsl"&gt;Login&lt;/a&gt;&lt;/td&gt; &lt;/xsl.when&gt; &lt;xsl:otherwise&gt; &lt;td align="right"&gt; Speel af als &lt;a href="{@mount}:m3u"&gt;M3U&lt;/a&gt; of als &lt;a href="{@mount}:xspf"&gt;XSPF&lt;/a&gt;&lt;/td&gt; &lt;/xsl:otherwise&gt; &lt;/xsl:choose&gt; &lt;/tr&gt;&lt;/table&gt; &lt;/div&gt; &lt;table border="0" cellpadding="4" id="info"&gt; &lt;xsl:if test="server_name"&gt; &lt;tr&gt;&lt;td&gt;Naam&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="server_name" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="server_description"&gt; &lt;tr&gt;&lt;td&gt;Beschrijving&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="server_description" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="genre"&gt; &lt;tr&gt;&lt;td&gt;Genre&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="genre" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="bitrate"&gt; &lt;tr&gt;&lt;td&gt;Bitrate&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="bitrate" /&gt; kbps&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="quality"&gt; &lt;tr&gt;&lt;td&gt;Quality:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="quality" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="video_quality"&gt; &lt;tr&gt;&lt;td&gt;Video Quality:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="video_quality" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="frame_size"&gt; &lt;tr&gt;&lt;td&gt;Framesize:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="frame_size" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="frame_rate"&gt; &lt;tr&gt;&lt;td&gt;Framerate:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="frame_rate" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="server_url"&gt; &lt;tr&gt;&lt;td&gt;URL&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;a target="_blank" href="{server_url}"&gt;&lt;xsl:value-of select="server_url" /&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;tr&gt;&lt;td&gt;Nu bezig&lt;/td&gt;&lt;td class="streamdataArtist"&gt; &lt;xsl:if test="artist"&gt;&lt;xsl.value-of select="artist" /&gt; - &lt;/xsl:if&gt;&lt;xsl:value-of select="title" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="roundbottom"&gt; &lt;img src="/corner_bottomleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;br /&gt; &lt;/xsl:when&gt; &lt;xsl:otherwise&gt; &lt;h3&gt;&lt;xsl:value-of select="@mount" /&gt; - Not Connected&lt;/h3&gt; &lt;/xsl:otherwise&gt; &lt;/xsl;choose&gt; &lt;/xsl:for-each&gt; &lt;xsl;text disable-output-escaping="yes"&gt;&amp;amp:&lt;/xsl:text&gt;nbsp; &lt;/body&gt; &lt;/html&gt; &lt;/xsl:template&gt; &lt;/xsl:stylesheet&gt;</pre></div>

Question

我已經使用 xml 和 xslt 設置了一個無線電廣播服務器。 我顯示當前正在播放的歌曲，但當然，每分鍾都會改變，所以我希望<div>每秒刷新一次，以確保顯示的數據是最新的。

我寫了一個 JQuery function，但這不起作用。 另外，我寫了以下測試 function 來測試 jquery 是否有效，但它沒有。

會不會是 jquery 在 XST 頁面中不起作用？

測試 function：

$(document).ready(function () {
        $("a").click(function () {
          alert("test");
            });
        });

單擊超鏈接時不顯示警報...

這是我當前的代碼：

    <xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" >
<xsl:output omit-xml-declaration="no" method="html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" />
<xsl:template match = "/icestats" >
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">
    $(document).ready(function () {
        setInterval(function () {
            $(".newscontent").load("status.xsl");
        }, 1000);
    });
  </script>
  <script type="text/JavaScript">
    window.onload = startTime;
    function startTime()
    {
    var date = new Date();
    var uur = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();

    if(min == 0 || min == 1 || min == 2 || min == 3 || min ==4 || min == 5 || min == 6 || min == 7 || min == 8 || min == 9)
    {
    min = "0" + min;
    }
    if(sec == 0 || sec == 1 || sec == 2 || sec == 3 || sec ==4 || sec == 5 || sec == 6 || sec == 7 || sec == 8 || sec == 9)
    {
    sec = "0" + sec;
    }

    var movingtime = uur + ":" + min + ":" + sec;
    document.getElementById('clock').innerHTML = movingtime;
    setTimeout('startTime()',500);
    }
  </script>

  <title>Muziekserver</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<h2>Overzicht</h2>
<br />
<!--index header menu -->
<div class="roundcont">
<div class="roundtop">
<img src="/corner_topleft.jpg" class="corner" style="display: none" />
</div>
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="4">
    <tr>
        <td bgcolor="#656565">
        <a class="nav" href="admin/">Administratie</a>
        <a class="nav" href="status.xsl">Overzicht van muziek</a></td>
    </tr>
</table>
<div class="roundbottom">
<img src="/corner_bottomleft.jpg" class="corner" style="display: none" />
</div>
</div>
<br />
<br />
<!--end index header menu -->
<!--mount point stats-->
<xsl:for-each select="source">
<xsl:choose>
<xsl:when test="listeners">
<div class="roundcont">
<div class="roundtop">
<img src="/corner_topleft.jpg" class="corner" style="display: none" />
</div>
<div class="newscontent">
    <div class="streamheader">
        <table cellspacing="0" cellpadding="0">
            <colgroup align="left" />
            <colgroup align="right" width="300" />
            <tr>
                <td><h3>Naam:  <xsl:value-of select="@mount" /></h3></td>
                <xsl:choose>
                    <xsl:when test="authenticator">
                        <td align="right"><a class="auth" href="/auth.xsl">Login</a></td>
                    </xsl:when>
                    <xsl:otherwise>
                        <td align="right"> Speel af als <a href="{@mount}.m3u">M3U</a> of als <a href="{@mount}.xspf">XSPF</a></td>
                    </xsl:otherwise>
                </xsl:choose>
        </tr></table>
    </div>

<table border="0" cellpadding="4" id="info">
<xsl:if test="server_name">
<tr><td>Naam</td><td class="streamdata"> <xsl:value-of select="server_name" /></td></tr>
</xsl:if>
<xsl:if test="server_description">
<tr><td>Beschrijving</td><td class="streamdata"> <xsl:value-of select="server_description" /></td></tr>
</xsl:if>
<xsl:if test="genre">
<tr><td>Genre</td><td class="streamdata"> <xsl:value-of select="genre" /></td></tr>
</xsl:if>
<xsl:if test="bitrate">
<tr><td>Bitrate</td><td class="streamdata"> <xsl:value-of select="bitrate" /> kbps</td></tr>
</xsl:if>
<xsl:if test="quality">
<tr><td>Quality:</td><td class="streamdata"> <xsl:value-of select="quality" /></td></tr>
</xsl:if>
<xsl:if test="video_quality">
<tr><td>Video Quality:</td><td class="streamdata"> <xsl:value-of select="video_quality" /></td></tr>
</xsl:if>
<xsl:if test="frame_size">
<tr><td>Framesize:</td><td class="streamdata"> <xsl:value-of select="frame_size" /></td></tr>
</xsl:if>
<xsl:if test="frame_rate">
<tr><td>Framerate:</td><td class="streamdata"> <xsl:value-of select="frame_rate" /></td></tr>
</xsl:if>
<xsl:if test="server_url">
<tr><td>URL</td><td class="streamdata"> <a target="_blank" href="{server_url}"><xsl:value-of select="server_url" /></a></td></tr>
</xsl:if>
<tr><td>Nu bezig</td><td class="streamdataArtist"> 
<xsl:if test="artist"><xsl:value-of select="artist" /> - </xsl:if><xsl:value-of select="title" /></td></tr>
</table>
</div>
<div class="roundbottom">
<img src="/corner_bottomleft.jpg" class="corner" style="display: none" />
</div>
</div>
<br />
<br />
</xsl:when>
<xsl:otherwise>
<h3><xsl:value-of select="@mount" /> - Not Connected</h3>
</xsl:otherwise>
</xsl:choose>

</xsl:for-each>
<xsl:text disable-output-escaping="yes">&amp;</xsl:text>nbsp;


</body>
</html>
</xsl:template>
</xsl:stylesheet>

Answer 1

您需要在文檔的<head>中包含對 jQuery 庫的引用。

例子：

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js" />
...
</head>

在對 Javascript 問題進行故障排除時，安裝 Firebug（適用於 Firefox）或使用適用於 Chrome 的開發人員工具可能會很有用。 每個都包含一個控制台，它將報告 Javascript 錯誤。 在您的情況下，您將看到如下錯誤：

'$ is not defined'

這意味着 jQuery 不工作。

更新

針對您更新的代碼，請注意以下內容不正確：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">
    $(document).ready(function () {
        setInterval(function () {
            $(".newscontent").load("status.xsl");
        }, 1000);
    });
</script>

它應該是：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js" />
<script type="text/javascript">
    $(document).ready(function () {
        setInterval(function () {
            $(".newscontent").load("status.xsl");
        }, 1000);
    });
</script>

第一個<script>元素從src屬性中的 URL 獲取其主體。 第二個<script>元素必須創建為特定於您的頁面的 Javascript。

Answer 2

看起來您忘記包含 jQuery 庫。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 

Answer 3

setInterval() 是你需要的。

另外，考慮使用 jQuery 准備方法而不是 onLoad 以及引用 jQuery 標記關於您有代碼的腳本標記。