使用jQuery隐藏元素和'View more'使用jQuery

JavaScript不是我的强项，但是我不确定我是否从正确的方向实现了这一点。首先，我有一些XSLT可以产生带有事件信息的HTML表格。我为每个与XSL位置（）匹配的表分配一个数字ID。使用jQuery隐藏元素和'View more'使用jQuery

我想要实现的是仅显示前10个表格，直到使用单击“查看更多”链接，然后显示接下来的10个表格直到元素结束。

我有在该代码一开始我写了是不是隐藏了10桌，现在的页面是什么，我认为崩溃的一个问题是一个死循环：

这里是XSLT：

<xsl:for-each select="umbraco.library:GetMedia(1116, 'true')/node"> 
    <xsl:variable name="fileName" select="data [@alias = 'file']" /> 
    <xsl:variable name="tableID" select="position()" /> 

    <table id="{$tableID}"> 
    <tr> 
     <td class="eventDate"> 
      <xsl:value-of select="data [@alias = 'eventDate']"/></td> 
     <td><a href="/downloader?file={$fileName}" target="_blank()" class="eventTitle"><xsl:value-of select="data [@alias = 'title']"/></a></td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td class="newsSubTitle"><xsl:value-of select="data [@alias = 'subTitle']"/></td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <img src="images/borders/news_separator.gif" /> 
     </td> 
    </tr> 
    </table> 
</xsl:for-each>

这里是JavaScript：

<script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      var rc = $('#eventReportsList table').length; 

      if(rc > 10) { 
       var i=0; 
       for (i=11;i=rc;i++) { 
        var currElement = '#' + i; 
        $(currElement).hide(); 
       } 
      }; 
      alert('Count ' + rc); 
     }); 
    </script>

在正确的方向上的一些帮助或指针将是巨大的！

谢谢。

来源

2010-03-10 DarrylGodden

我不知道这是否有帮助，但“id”值应以字母或“_”开头（如编程语言中的变量名称）。 – Pointy 2010-03-10 15:07:15

@Pointy：替换*“应该是”*与**“必须”**。 :-) – 2010-03-10 15:09:11

@TJ好吧我不是一个专制的太多。 – Pointy 2010-03-10 15:19:00

更改XSL：

<xsl:variable name="tablesPerSet" select="10" /> 

<xsl:for-each select="umbraco.library:GetMedia(1116, 'true')/node"> 
    <xsl:variable name="posZ" select="position() - 1" /> 
    <xsl:variable name="tableSetId" select=" 
    ($posZ - ($posZ mod $tablesPerSet)) div $tablesPerSet 
    " /> 
    <table class="hideable tableSet_{$tableSetId}"> 
    <!-- ... --> 
    </table>  
</xsl:for-each>

的结果：

<table class="hideable tableSet_0"></table><!-- #1 --> 
<!-- ... --> 
<table class="hideable tableSet_0><!-- #10 --> 
<table class="hideable tableSet_1"></table><!-- #11 --> 
<!-- and so on -->

所以，你可以使用jQuery

// first hide all, then show only those that match i 
$("table.hideable").hide().is(".tableSet_" + i).show();

做0

我相信你会管理递增/递减i，同时自己保持在有效范围内。 ;）

来源

2010-03-10 16:34:20 Tomalak

你先生是XSL天才！我明天会发布完整的代码以帮助其他人！ – DarrylGodden 2010-03-10 17:07:44

$("table.hideable").hide().is(".tableSet_" + i).show();

这行错误，不知道为什么，因为我没有大量的jQuery，说对象不支持这个属性或方法，任何想法？ – DarrylGodden 2010-03-11 10:39:07

我没有看太多，但你的jQuery似乎有点OTT。例如：

$('table').filter(function(index) { 
    return index > 10; 
}).hide();

将在您的页面上隐藏第11个表格。如果您使用的表在其他地方，只是给他们所有的一类像可隐藏和做

$('.hideable').filter(function(index) { 
    return index > 10; 
}).hide();

来源

2010-03-10 15:46:54 Apemantus

要隐藏的11个表：

$('table:gt(9)').hide();

:gt(x)选择与指数（兄弟姐妹从0 ）大于x;

要再次显示隐藏的表：

$('table:hidden').show();

来源

2010-03-10 15:56:09

比我的整洁。 – Apemantus 2010-03-10 16:44:32

使用jQuery隐藏元素和'View more'使用jQuery

回答

相关问题