Question

#play-pause应该更改src属性。我试过使用innerHtml但是我输入的值不像'/media/pauseButton.png“/＆gt;'

var video = document.getElementById("postvideo");
var playButton = document.getElementById("play-pause");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
    // Play the video
    video.play();
    // Update the button to 'Pause'
    playButton.innerHTML = "<img src="<?php echo get_template_directory_uri(); ?>/media/playButton.png" />";
} else {
    // Pause the video
    video.pause();

    // Update the button to 'Play'
    playButton.innerHTML = "<img src="<?php echo get_template_directory_uri(); ?>/media/pauseButton.png" />";
}

刷新后，＃play-pause没有改变，而且功能改为video.pause（）;不再有用了。

我想要它做的是更改图像源路径以从播放图标图像更改为暂停图标图像。这是文档准备好的布局html的初始输出：

<div id="play-pause">
    <img src="<?php echo get_template_directory_uri(); ?>/media/playButton.png" />
</div>

Answer 1

由于你正在使用jQuery，你可以使用jQuery选择器来获取元素，比如$('#postvideo');我还建议在那里同时使用这两个图像，并操纵哪一个使用例如{{1} }和$('#play-pause').show()。

使用jQuery更改img源代码而不更改图像或功能

1 个答案: