Question

我为幻灯片显示了一个非常简单的javascript函数（here）。它工作得很好，但我想改变控制按钮的一些东西。现在，播放/暂停按钮显示它自己的名字，如下所示：

<button class="controls" id="pause">Pause</button>

javascript设置为在某些情况下运行名为pauseSlideshow的函数，不仅暂停/恢复幻灯片放映，还会将按钮的显示内容从“暂停”更改为“播放”：

var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow() {
    pauseButton.innerHTML = 'Play';
    playing = false;
    clearInterval(slideInterval);
}

现在，我想要做的是将按钮留空并处理工作宽度背景图像，为此我计划在触发pauseSlideshow功能时进行简单的类交换。所以，首先我在按钮中添加了一个名为pause的类，并在样式中设置了所需的背景图像：

<button class="controls pause" id="pause"></button>

接下来我会做这样的事情：

var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow() {
    pauseButton.removeClass('pause');
    pauseButton.addClass('play');
    playing = false;
    clearInterval(slideInterval);
}

（其中play是另一个具有不同背景图像的类）。足以说，只要pauseSlideshow运行，函数就会崩溃。我写错了或写错了，但我知道这种方法是可行的。

拜托，有人可以指出错误吗？

修改

使用$（pauseButton）.removeClass（'pause'）;和   $（暂停按钮）.addClass（ '玩'）;. addClass和removeCalss是jQuery   方法。而且你还需要添加jQuery引用。 - user3698428

document.getElementById（“pause”）不返回jQuery元素。   .removeClass（）和.addClass（）是jQuery函数。所以基本上你   正在尝试在非jQuery元素上调用jQuery函数而且它是   抛出一个错误。将其更改为var pauseButton = $（“＃pause”）;要么   $（暂停按钮）.removeClass（...）; $（暂停按钮）.addClass（...）;

当我尝试任何一种方式时，控制台返回：未捕获的ReferenceError：$未定义

Answer 1

使用纯JavaScript时，您应该使用它来添加或删除类：

pauseButton.classList.remove('pause');
pauseButton.classList.add('play');

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

javascript：删除/添加类功能

1 个答案: