首頁猿問 setTime 0 在每個視頻上結(jié)束

setTime 0 在每個視頻上結(jié)束

JavaScript

冉冉說 2022-07-08 16:05:20

我在每個頁面中有 3 或 4 個這樣的模塊。（類“boxvideo1”和id“boxvideo4”由js添加） <div class="servicios__layout"> <div class="grid"> <div class="box boxvideo1"> <video id="boxvideo4" class="slider-video h" width="100%" style="visibility: visible; width: 100%;"> <source src="//dl.dropbox.com/s/931244iox7i0fpk/working-with-espresso.mp4" type="video/mp4"> </video> <div class="icon-play"></div> <a href="https://google.es"><div class="icon-mas"></div></a> </div> <div class="box boxvideo2"> <video id="boxvideo4" class="slider-video h" width="100%" style="visibility: visible; width: 100%;"> <source src="//dl.dropbox.com/s/931244iox7i0fpk/working-with-espresso.mp4" type="video/mp4"> </video> <div class="icon-play"></div> <a href="https://google.es"><div class="icon-mas"></div></a> </div> </div> </div>我在js中有兩個問題：首先，標簽 ID 始終相同且不是動態(tài)的。（總是 boxvideo4）第二個問題它的 js 沒有將 currentTime 設置為 0。var i = 1;var str1 = 'boxvideo';var str2 = '.boxvideo';var str3 = 'boxvideo';$('.servicios__layout .box').each(function (index, value) { var classAdd = str1 + i; var classCall = str2 + i; var classCall2 = str3 + i; $(this).addClass(classAdd); $('.servicios__layout .box .slider-video').attr('id', classCall2); $(classCall + ' .slider-video').on("ended", function () { $(classCall + " .icon-play").fadeIn(); document.getElementById('classCall2').currentTime = 0; }); i++;});

查看完整描述

1 回答

PIPIONE

TA貢獻1829條經(jīng)驗獲得超9個贊

考慮以下代碼。

$(function() {

var videos = $(".slider-video");

videos.each(function(i, el) {

$(el).attr("id", "box-video-" + (i + 1));

});

videos.on("ended", function() {

$(this).get(0).currentTime = 0;

});

</video>

</a>

</div>

</video>

</a>

</div>

更新

要在循環(huán)內(nèi)重置id，我會使用傳入回調(diào)函數(shù)的變量。我用于i索引和el元素。

該.each()方法旨在使 DOM 循環(huán)結(jié)構(gòu)簡潔且不易出錯。當被調(diào)用時，它會遍歷作為 jQuery 對象一部分的 DOM 元素。每次回調(diào)運行時，都會傳遞當前循環(huán)迭代，從 0 開始。更重要的是，回調(diào)是在當前 DOM 元素的上下文中觸發(fā)的，因此關(guān)鍵字 this 指的是該元素。

查看更多：https ://api.jquery.com/each/

反對回復 2022-07-08