通过 php 变量使用 getElementById

Question

我在 php 中使用这个 jquery 脚本来为每个循环模式添加一个唯一的 ID。

事情是一切都很好，除了我不明白为什么 $count for var myVideo=document.getElementById('htmlVideo' + <?php echo $count?>); returns a at say 6 all time

所以假设我要单击 videoBtn1，#videoModal1 将打开正确的视频，但 myVideo 将 return 我来自 #htmlVideo6 的视频。无论我是点击 videoBtn1 还是 videoBtn10，myVideo 总是指向#htmlVideo6

<?php  
  $count = 0;
  while ( have_rows('video') ) : the_row(); ?>
    <div class="col-lg-4 col-md-6 mt-3 mt-lg-5">
      <div class="d-flex flex-column h-100 px-3">
        <div data-toggle="modal" data-target="#videoModal<?php echo $count?>" id="videoBtn<?php echo $count?>">
           <img src="<?php echo get_sub_field('video_thumbnail') ?> " width="100%" style="height: 240px;object-fit: cover;">
        </div>

        <div class="py-3 h-100 d-flex flex-column align-items-start">
          <h4 class="text-heavy">
            <?php echo get_sub_field('title') ?>
          </h4>
          <p>
              <?php echo get_sub_field('content') ?>
          </p>
        </div>

      </div>
    </div>
    <!--Video Modal -->
    <div class="modal fade" id="videoModal<?php echo $count?>" role="dialog" aria-labelledby="videoModal<?php echo $count?>Label" aria-hidden="true" >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-body p-3 position-relative">

            <div type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="text-white">&times;</span>
            </div>
            <video id="htmlVideo<?php echo $count?>" width="100%" controls style="z-index:5">
              <source src="<?php echo get_sub_field('video')?>" type="video/mp4">
            </video>

            <script>
              var container = $("#htmlVideo<?php echo $count?>");
                var myVideo=document.getElementById('htmlVideo' + <?php echo $count?>);
              $(document).ready(function(){
                $("#videoBtn<?php echo $count?>").click(function(){
                  console.log(myVideo);
                  myVideo.play();
                });
                $("#videoModal<?php echo $count?>").click(function(e) 
                {
                  // if the target of the click isn't the container nor a descendant of the container
                  if (!container.is(e.target) && container.has(e.target).length === 0) 
                  {
                    myVideo.pause();
                  }
                });
              });
            </script>
          </div>
        </div>
      </div>
    </div>
<?php
  $count++;
  endwhile;    
?>

Answer 1

只需创建一个 class 并为其赋予 data-id 属性

在 jquery 部分使用类似

的代码

$('.class').click(function(){<bR>
    var that=$(this);<bR>
    var id=that.data('id');<bR>
    //now do your stuff here like<bR>
    $('#div'+id).modal('show');<bR>
});

Answer 2

循环脚本是非常糟糕的做法。给按钮 and/or 视频一个 class 并使用 class 使用一段脚本访问它 - 这意味着你甚至不需要给它一个 ID

每次都会覆盖所有其他变量

var myVideo=document.getElementById('htmlVideo' + <?php echo $count?>);

试试这个：

给父容器一个class:

<div class="modalClickParent col-lg-4 col-md-6 mt-3 mt-lg-5">

并使用类似

的东西

$(function() {
  $("[data-toggle=modal]").on("click", function() {
    const myVideo = $(this).closest(".modalClickParent").next().find("video").get(0);
    if (!$(this).data("playing")) {
      myVideo.play();
      $(this).data("playing", true);
    } else {
      myVideo.pause();
      $(this).data("playing", false);
    }
  });
});

通过 php 变量使用 getElementById

Using getElementById through with a php variable

php

wordpress

jquery

advanced-custom-fields