여러 HTML5 비디오를 제어하고 있으며 사용자가 클릭 한 플레이어의 재생 및 일시 중지 아이콘을 변경해야합니다.
이제 단일 플레이어에 대해이 작업을 수행하는 방법은
$('.glyphicon-pause').attr('class', 'glyphicon glyphicon-play');
그러나 여러 플레이어의 일부인 경우 (아래 색인 목록에 따라)이 간단한 접근 방식을 사용하면 모든 플레이어가 영향을받습니다. 예를 들어
function onplayCallback(index) {
// Event listener for the play/pause button
playButton[index].addEventListener("click", function() {
if (popUpPlayer[index].paused == true) {
popUpPlayer[index].play();
$('.glyphicon-play').attr('class', 'glyphicon glyphicon-pause'); <-----here
} else {
// Pause the video
popUpPlayer[index].pause();
// Update the button text to 'Play'
$('.glyphicon-pause').attr('class', 'glyphicon glyphicon-play');
}
});
위의 줄을
$(this).attr('class', 'glyphicon glyphicon-pause');
그러나 문제는 이것이 다른 일시 중지 아이콘을 추가한다는 것입니다.
이 문제를 해결할 방법이 있습니까? 나는 $(this).removeClass()등 을 시도 했지만 그 방법 중 어느 것도 작동하지 않습니다.
완전성을 위해 여기에 html이 있습니다.
<div id="video-controls">
<a href="#" id="play-pause_<?php echo $i+1;?>"><span class="glyphicon glyphicon-play"></span></a>
<input type="range" id="seek-bar_1" value="0">
<a href="#" id="btnMute_<?php echo $i+1;?>"><span class="glyphicon glyphicon-volume-up"></span></a>
<input type="range" id="volume-bar_<?php echo $i+1;?>" min="0" max="1" step="0.1" value="1">
<a href="#" id="btnFullscreen_<?php echo $i+1;?>"><span class="glyphicon glyphicon-fullscreen"></span></a>
</div>
감사
(currentTarget)을 $(this)가리키고 있기 때문에 작동하지 않았다고 생각 <a>하지만 내부 <span>? 의 값을 기록 했습니까 this?
레이아웃에 따라 다르지만 범위가 전체 버튼이면 해당 버튼을 e.target가리켜 야합니다.
playButton[index].addEventListener("click", function(e) {
console.log(e.target); // check this is what you want
var $span = $(e.target);
if (popUpPlayer[index].paused == true) {
$span.removeClass('glyphicon-pause').addClass('glyphicon-play');
} else {
$span.removeClass('glyphicon-play').addClass('glyphicon-pause');
}
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다