滑块在 PHP 中不可见，但在 HTML 中有效

Posted 2023-05-08

【中文标题】滑块在 PHP 中不可见，但在 HTML 中有效

【英文标题】：Slider not visible in PHP but in HTML works

【发布时间】：2021-09-17 19:24:27

【问题描述】：

我正在制作一个滑块的简码，显示我的 WP 特色帖子，并且可以通过隐藏的 div 打开每个帖子的详细信息。滑块基于 w3schools 的这个（你可以从这个地址看到代码和在线测试：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

问题是滑块只有在我单击下一个箭头并从那里正常工作时才在 php 中可见。我不知道为什么，因为在 html 中它可以正常工作。

出现错误：Cannot read property 'style' of undefined in

      slides[slideIndex-1].style.display = "block";

我的 CSS：

#slider 
    width: 70%;
    
    margin: auto;
    position: relative;
    font-size: 15px;


.slide display: none;

我的 PHP：

   <?php $query = new WP_Query( $args );

   ob_start();?>

   <div id="slider" class="slider">
   <div class="arrows">
   <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
   <a class="next" onclick="plusSlides(1)">&#10095;</a></div>



        <?php
        while( $query->have_posts() ) :
        $query->the_post(); 
        $image = wp_get_attachment_image_src(get_post_thumbnail_id($post- 
        >ID), '');
        $featuredID = get_post_thumbnail_id();?>

        <div class="slide fade" id="slide">
        <h2 class="zz-sc-jscss"><?php the_title(); ?></h2>
        By <?php the_author(); ?> on <?php echo get_the_date( 'l, F d, Y' ); 
       ?>
      <?php echo the_post_thumbnail();?>
   <?php 
   echo "<div"; echo ' class="n"'; echo "id=".$featuredID.">";
   $info = $featuredID;echo "</div>";
     
    ?> <div class="open">
  <?php echo get_post_field('post_content', $post->ID);?>
  <span class="cerrar">X</span></div></div>

   
<?php endwhile;

    wp_reset_postdata();

    return ob_get_clean();
  

我的 JS：

 var slideIndex = 1;
 showSlides(slideIndex);

 // Next/previous controls
  function plusSlides(n) 
  showSlides(slideIndex += n);
 

  // Thumbnail image controls
  function currentSlide(n) 
  showSlides(slideIndex = n);


 function showSlides(n) 
  var i;
  var slides = document.getElementsByClassName("slide");
  if (n > slides.length) slideIndex = 1
  if (n < 1) slideIndex = slides.length
  for (i = 0; i < slides.length; i++) 
      slides[i].style.display = "none";
  
  
  slides[slideIndex-1].style.display = "block";
  

【参考方案1】：

问题似乎出在“滑块” div 中，它似乎没有关闭。也可以尝试在幻灯片生成循环之后移动它。

<div id="slider" class="slider"></div> <--missing
<div class="arrows">
   <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
   <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>