使用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

回答

相關問題