我在 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">×</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>
2 回答
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
循環腳本是非常糟糕的做法。為按鈕和/或視頻指定一個類，并使用該類通過一段腳本來訪問它 - 這意味著您甚至不需要為其提供 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);
}
});
});
至尊寶的傳說
TA貢獻1789條經驗 獲得超10個贊
只需創建一個要單擊的類并為其指定 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>
});
- 2 回答
- 0 關注
- 126 瀏覽
添加回答
舉報
0/150
提交
取消