隐藏显示内容Javascript WordPress帖子

问题描述

因此,我试图在wordpress上创建一个列表操作帖子,其内容一直隐藏,直到您单击它为止;当您单击另一帖子时,它将隐藏打开的帖子,并显示新的帖子。我想出了这个脚本:

add_filter( 'woocommerce_my_account_my_orders_query','unset_pending_payment_orders_from_my_account',10,1 );
function unset_pending_payment_orders_from_my_account( $args ) {
    $statuses = wc_get_order_statuses();    
    unset( $statuses['wc-pending'] );
    $args['post_status'] = array_keys( $statuses );
    return $args;
}

像这样在wordpress发布循环中

    var activePlayer = null
function setActivePlayer(newActivePlayer) {
  if (activePlayer) {
    activePlayer.classList.remove(“EpisodeShow”);
    activePlayer.classList.add(“EpisodeSHide”);
  }
  activePlayer = newActivePlayer;
  if (newActivePlayer) {
    newActivePlayer.classList.remove(“EpisodeSHide”);
    newActivePlayer.classList.add(“EpisodeShow”);
  }
}

从加载的样式表中获取样式,就像这样简单:

<article id="post-<?PHP the_ID(); ?>" <?PHP post_class(); ?>>
    <header class="all-episodes">
        <div onclick="{ setActivePlayer(event.element)};" class="row" id="episode-<?PHP echo get_the_ID();?>"><p class="episode-item">
                <?PHP the_title(); ?>&nbsp;-&nbsp;
                <?PHP echo get_the_date('d/m/Y'); ?>&nbsp;-&nbsp;
                <?PHP echo strip_tags (get_the_term_list( get_the_ID(),'shows',"","," ));?>&nbsp;-&nbsp;
                <?PHP echo strip_tags (get_the_term_list( get_the_ID(),'genres'," ));?>
            </p>
        </div> 
    </header><!-- .entry-header -->
    <div class="episode-content EpisodeHide" id=" episode-content-<?PHP echo get_the_ID();?>">
        <?PHP
        the_content(
            sprintf(
                wp_kses(
                    /* translators: %s: Post title. Only visible to screen readers. */
                    __( 'Continue reading<span class="screen-reader-text"> "%s"</span>','twentynineteen' ),array(
                        'span' => array(
                            'class' => array(),),)
                ),get_the_title()
            )
        );

        wp_link_pages(
            array(
                'before' => '<div class="page-links">' . __( 'Pages:','after'  => '</div>',)
        );
        ?>
    </div><!-- .entry-content -->

    <footer class="entry-footer">
    </footer><!-- .entry-footer -->
</article>

现在我收到此错误

.EpisodeHide {
    display: none;
}

.EpisodeShow {
    display: block;
}

该行更改为onclick发布所在的行

Uncaught ReferenceError: setActivePlayer is not defined
    at HTMLdivelement.onclick ((index):103)

有什么建议吗?

这对我有很大帮助!!!
预先感谢

解决方法

我知道了!
对于想知道如何做的人:

JavaScript

        var activePlayer = null
    function setActivePlayer(newActivePlayerID) {
        var newActivePlayer = document.getElementById(newActivePlayerID);

        if (activePlayer) {
            activePlayer.classList.remove('EpisodeShow');
            activePlayer.classList.add('EpisodeHide');
        }
        activePlayer = newActivePlayer;
        if (newActivePlayer) {
            newActivePlayer.classList.remove('EpisodeHide');
            newActivePlayer.classList.add('EpisodeShow');
        }
    }

发布循环代码

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="all-episodes">
        <div onclick="{ setActivePlayer('episode-content-<?php echo get_the_ID();?>')};" class="row" id="episode-<?php echo get_the_ID();?>"><p class="episode-item">
                <?php the_title(); ?>&nbsp;-&nbsp;
                <?php echo get_the_date('d/m/Y'); ?>&nbsp;-&nbsp;
                <?php echo strip_tags (get_the_term_list( get_the_ID(),'shows',"","," ));?>&nbsp;-&nbsp;
                <?php echo strip_tags (get_the_term_list( get_the_ID(),'genres'," ));?>
            </p>
        </div> 
    </header><!-- .entry-header -->
    <div class="episode-content EpisodeHide" id="episode-content-<?php echo get_the_ID();?>">
        <?php
        the_content(
            sprintf(
                wp_kses(
                    /* translators: %s: Post title. Only visible to screen readers. */
                    __( 'Continue reading<span class="screen-reader-text"> "%s"</span>','twentynineteen' ),array(
                        'span' => array(
                            'class' => array(),),)
                ),get_the_title()
            )
        );

        wp_link_pages(
            array(
                'before' => '<div class="page-links">' . __( 'Pages:','after'  => '</div>',)
        );
        ?>
    </div><!-- .entry-content -->

    <footer class="entry-footer">
    </footer><!-- .entry-footer -->
</article>

样式表是相同的!
就像魅力一样:)