使用jQuery更改img源，但不更改图像或功能

Question

#play-pause应该会更改src属性。我尝试过使用媒体，但是我不能输入像‘/ innerHtml /pauseButton.png“/>’这样的值

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');。我建议你把两张图片都放在那里，然后用$('#play-pause').show()和$('#play-run').hide()来控制显示哪张图片。