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

Posted 2023-05-07

【中文标题】显示/隐藏幻灯片的标题仅适用于第一张幻灯片

【英文标题】：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 文档中必须是唯一的。

【参考方案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