添加 jquery 到 joomla 模块

Add jquery to joomla module

为什么 jquery 魔法对我不起作用?

在我的 module_name.php 我有:

$document = JFactory::getDocument();
$document->addScriptDeclaration('
$(document).ready(function(){
    $("table tr:gt(5)").hide();
    $("#show").click(function(){
    $("table tr:gt(5)").show();
    });
   });
');

在我的模块模板中 default.php 我有:

<table>
<tr>
<td style="width: 33px;" align="center"><strong>№</strong></td>
<td style="width: 148px;"><strong>Ник</strong></td>
<td style="width: 107px;"><strong>Рубли</strong></td>
</tr>
<?php

$position = 1;  

foreach ($top as $row) {
    echo '<tr>';
    echo '<td>' . $position . '</td>';
    echo '<td>' . $row['0'] . '</td>';
    echo '<td>' . $row['1'] . '</td>';
    echo '</tr>';
    $position ++;
 }
 ?>
 </table>
 <input id="show" type="button" value="Раскрыть">

此代码显示了一个 table 以及包含在变量 $top 中的 JDatabaseQuery 的结果。

在我页面的源代码中,我看到 link 到库

<script src="/media/jui/js/jquery.min.js"></script>

和我的 jquery 脚本

<script>
jQuery(window).on('load',  function() {
            new JCaption('img.caption');
        });
$(document).ready(function(){
    $("table tr:gt(5)").hide();
    $("#show").click(function(){
    $("table tr:gt(5)").show();
    });
});

window.setInterval(function(){var r;try{r=window.XMLHttpRequest?new 
XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}if(r)
{r.open("GET","/index.php?
option=com_ajax&format=json",true);r.send(null)}},3600000);
</script>

和table

<table>
<tbody>
<tr>
<td style="width: 33px;" align="center"><strong>№</strong></td>
<td style="width: 148px;"><strong>Ник</strong></td>
<td style="width: 107px;"><strong>Опыт</strong></td>
</tr>
<tr><td>1</td><td>dist</td><td>8295</td></tr>
<tr><td>2</td><td>biowolf</td><td>6142</td></tr>
<tr><td>3</td><td>arsen2005</td><td>6002</td></tr>
<tr><td>4</td><td>roman</td><td>5992</td></tr>
<tr><td>5</td><td>cyber</td><td>4305</td></tr>
<tr><td>6</td><td>mik</td><td>3935</td></tr>
<tr><td>7</td><td>artyom</td><td>3646</td></tr>
<tr><td>8</td><td>romeo</td><td>3645</td></tr>
<tr><td>9</td><td>miamivice</td><td>2896</td></tr>
<tr><td>10</td><td>kolya</td><td>2686</td></tr>
</table>

但什么也没发生。 table 中的行不隐藏。我哪里错了?

我的疑惑在于应该有这种语法

$document = JFactory::getDocument();
$document->addScriptDeclaration('
    (function($){
        $(document).ready(function(){
            $("table tr:gt(5)").hide();
                $("#show").click(function(){
            $("table tr:gt(5)").show();
            });
        });
    })(jQuery);
');