我在 php 中使用這個(gè) jquery 腳本向每個(gè)循環(huán)模式添加一個(gè)唯一的 id。事情是一切都工作得很好，除了我不明白為什么$countforvar myVideo=document.getElementById('htmlVideo' + <?php echo $count?>);總是在說(shuō) 6 時(shí)返回 a假設(shè)我要單擊 videoBtn1，#videoModal1 將打開(kāi)正確的視頻，但 myVideo 將從 #htmlVideo6 返回視頻。無(wú)論我點(diǎn)擊 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 回答
飲歌長(zhǎng)嘯
TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊
循環(huán)腳本是非常糟糕的做法。為按鈕和/或視頻指定一個(gè)類，并使用該類通過(guò)一段腳本來(lái)訪問(wèn)它 - 這意味著您甚至不需要為其提供 ID
這每次都會(huì)覆蓋所有其他變量
var myVideo=document.getElementById('htmlVideo' + <?php echo $count?>);
嘗試這個(gè)：
給父容器一個(gè)類：
<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);
}
});
});
至尊寶的傳說(shuō)
TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超10個(gè)贊
只需創(chuàng)建一個(gè)要單擊的類并為其指定 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 關(guān)注
- 135 瀏覽
添加回答
舉報(bào)
0/150
提交
取消