通过 php 变量使用 getElementById

Question

我在 php 中使用这个 jquery 脚本向每个循环模式添加一个唯一的 id。事情是一切都工作得很好，除了我不明白为什么$countforvar myVideo=document.getElementById('htmlVideo' + <?php echo $count?>);总是在说 6 时返回 a假设我要单击 videoBtn1，#videoModal1 将打开正确的视频，但 myVideo 将从 #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>

Answer 1

循环脚本是非常糟糕的做法。为按钮和/或视频指定一个类，并使用该类通过一段脚本来访问它 - 这意味着您甚至不需要为其提供 ID

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

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

尝试这个：

给父容器一个类：

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

    }

  });

});

Answer 2

只需创建一个要单击的类并为其指定 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>

});