显示/隐藏幻灯片的标题仅适用于第一张幻灯片答案

【问题标题】：Show / Hide slide's title works only in first Slide显示/隐藏幻灯片的标题仅适用于第一张幻灯片
【发布时间】：2021-03-03 07:14:39
【问题描述】：

我正在使用一个简单的 jQuery 方法在 Slick Slider 中显示/隐藏标题。但由于某种原因，它只适用于第一张幻灯片。

function myFunction() {
var x = document.getElementById("show");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}

还添加了一个子类，也只适用于第一张幻灯片：

function myFunction() {
var x = document.getElementById("show");
var y = x.getElementsByClassName("slide");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.display = "block";
}
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}

这是我所拥有的：

                 <section id="home-slider">
                 <div class="slick preloading">
                 <?php foreach ( $sliders as $i => $post ) {setup_postdata( $post );                    
                 $my_box = get_post_meta( $post->ID, '_format_video_embed_box', true ); ?>
                 <div class="slide">
                     <div class="video">
                        <div class="screen" id="slick-video-<?php echo my_wrap( $post->ID ); ?>"></div>
                     </div>
                 <div class="bottom">
                 <div class="sub">
                 <?php if ( my_mod( 'slider_layout' ) == 'full' ) { ?>                                  
                 <div class="container">                                    
                 <?php } ?>

<div class="inner">
<button onclick="myFunction()"> Click </button>
<div id="show">

                 <div class="post-author">
                 <?php the_author_posts_link(); ?><a href="<?php the_permalink() ?>"><h3><?php the_title(); ?</h3</a> 
                 </div>
                 <?php if ( my_mod( 'slider_layout' ) == 'full' ) { ?>
                 </div>             

<script>
function myFunction() {
var x = document.getElementById("show");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}</script>
            </div>

                 <?php } ?>
                 </div>
                 </div>
                 </div>
                 </div>
                 <?php } ?>
                 </div>
                 </section>

CSS：

#show{
display:none;
}

如何实现显示/隐藏所有幻灯片的标题或
使用简单的 jQuery 方法显示/隐藏每张幻灯片的标题。

【问题讨论】：

仅供参考，您所拥有的东西不起作用的“某种原因”是您违反了基本规则，即 ID 在 HTML 文档中必须是唯一的。

标签： javascript jquery slick.js

【解决方案1】：

我想通了...与其使用 javascript，不如直接应用 CSS 来实现我的目标...所以它就是这样，它的工作原理就像一个魅力！所有幻灯片都通过鼠标悬停显示/隐藏。

.bottom {
width: 100%;
height: 0;
bottom: -205px;
text-align: left;
color: #FFF;
z-index: 100;
}
.sub {
-webkit-transform: translate(0, 37%);
transform: translate(0, 37%);
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
opacity: 0;
}
.bottom .inner {
width: 47%;
height: 450px;
margin: 0 0 0 150px;
position: relative;
bottom: 450px;
}

演示：Slider's title Show and Hide on mouse over

【讨论】：