Question

我目前有一个循环，使用 posts_per_page 显示每个自定义帖子类别的前8个帖子。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:local="local"
    exclude-result-prefixes="xs"
    version="2.0"
    xmlns:svg="http://www.w3.org/2000/svg">
    <xsl:output indent="yes"/>

    <xsl:template match="/">
        <svg>
        <xsl:apply-templates select="@* | node()"/>
                </svg>

            </xsl:template>

    <xsl:template match="//graphview/nodeview">
        <xsl:variable name="nodeleft" select="properties/rectangle/@left"/>
        <xsl:variable name="noderight" select="properties/rectangle/@right"/>
        <xsl:variable name="nodetop" select="properties/rectangle/@top"/>
        <xsl:variable name="nodebottom" select="properties/rectangle/@bottom"/>
        <!-- adding svg group item -->
        <g>
            <xsl:element name="rect">
                <xsl:attribute name="x"><xsl:value-of select="$nodeleft"/></xsl:attribute>
                <xsl:attribute name="width"><xsl:value-of select="($noderight - $nodeleft)"/></xsl:attribute>
                <xsl:attribute name="height"><xsl:value-of select="($nodetop - $nodebottom)"/></xsl:attribute>
                <xsl:attribute name="y"><xsl:value-of select="($nodetop)"/></xsl:attribute>
            </xsl:element>
        </g>
    </xsl:template>
</xsl:stylesheet>

我现在需要的是一个按钮，它显示在循环下方，只有当该类别中有超过8个帖子时才会显示“查看其余”。

点击后，该类别中的其他帖子随后会在同一页面上“显示”......就是这样！

这可以在没有AJAX的情况下完成吗？我觉得它应该是相当直接的，但我正在寻找解决方案。

Answer 1

我最终使用js / jQuery与css ：nth-child 结合使用。首先，我加载了该类别的所有帖子，而不是限制它在循环中。然后我使用：nth-child 基本上“检查”以查看是否有超过8个带有“gallery-container”类的div并在页面加载时隐藏它们，如果是这样的话：

.gallery-container:nth-child(n+9)
    display: none

然后当按下按钮时，使用jQuery取消隐藏它们以添加“show”类。

.show
    display: block !important

jQuery的：

$('.btn-show-more').on('click', function (){
    $('.gallery-container:nth-child(n+9)').toggleClass('show');
});

希望这可以帮助那些在同一问题上挣扎的人。我不确定这是否是解决这个问题的最佳方法，但它对我来说很好。

在wordpress中单击按钮时显示类别中的剩余帖子

1 个答案: