隐藏显示内容 Javascript WordPress 帖子

Question

所以我想在 Wordpress 上制作一个列表 op posts，在你点击它之前隐藏内容，当你点击另一个 post 时，它会隐藏打开一个，展示新的。我想到了这个脚本：

    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”);
  }
}

在 WordPress post 循环中是这样的

<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:', 'twentynineteen' ),
                'after'  => '</div>',
            )
        );
        ?>
    </div><!-- .entry-content -->

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

从加载的样式表中获取样式，就这么简单：

.EpisodeHide {
    display: none;
}

.EpisodeShow {
    display: block;
}

现在我收到这个错误：

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

该行更改为 posts onclick 所在的行

<div onclick="{setActivePlayer(event.element)};" class="row" id="episode-6"><p class="episode-item">

有什么建议吗？

这对我很有帮助！！！
提前致谢

Answer 1

我想通了！
对于想知道如何操作的人：

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');
        }
    }

Post 循环代码

<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:', 'twentynineteen' ),
                'after'  => '</div>',
            )
        );
        ?>
    </div><!-- .entry-content -->

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

风格sheet一样！
很有魅力:)

隐藏显示内容 Javascript WordPress 帖子

Hide Show Content Javascript WordPress posts

javascript

wordpress

posts