javascript-使用jQuery隐藏元素和“查看更多”

JavaScript不是我的强项,但是我不确定我是从正确的方向实现这一目标的.

首先,我有一些XSLT可以生成带有事件信息的HTML表.我为每个与XSL position()匹配的表分配一个数字ID.

我要实现的是仅显示前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>

在正确的方向上提供一些帮助或指示会很棒！

谢谢.

解决方法:

更改的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();

我相信您会自行管理递增/递减值i,同时将其保持在有效范围内.

标签：xslt,javascript
来源： https://codeday.me/bug/20191210/2100000.html