Javascript 单击图像后进行图像更改

我已经花了好几个小时查看了尽可能多的在线资源和stackoverflow问题，但出于某种原因，我就是搞不懂这一点

我正试图使用CSS和图像精灵，使链接显示为一个图像，一旦它被悬停在上面并被点击，就会发生变化。我已经花了很长时间研究CSS和JavaScript，现在我只需要一些关于如何让它工作的指导

我已经设法使它改变一旦它悬停在然而我真正需要做的是让图像改变一旦点击。因此，begin with it显示播放按钮，单击时显示暂停按钮，再次单击时显示播放按钮等

据我所知，我需要使用JavaScript和onclick事件。然而，我不知道这将如何工作，或者如何使用它与图像精灵

到目前为止，我的CSS是这样的

.testclass.stratus{
背景位置：-1px-1px；
宽度：21px；
高度：21px；}

.testclass.stratus:悬停{背景位置：-1px-29px；宽度：21px；高度：
21px；}

但是，这仅影响“播放”按钮以及将其悬停在上方时。现在我需要一种方法来显示暂停按钮时，播放按钮是点击，反之亦然

图像精灵URL。

我正在尝试处理的页面的URL。

---

这可以通过CSS和HTML实现，还是我还需要使用一些JavaScript？非常感谢您的帮助。

很简单，您在哪里读过

jQuery('.testclass .stratus').click(function{
   jQuery(this).toggleClass('played');
})

css:

---

您必须使用JavaScript来完成切换，纯CSS无法实现这种逻辑

最简单的方法是让两门课

play

和

pause

。通过CSS，您可以声明要为每个类显示的精灵部分。然后，使用JavaScript将单击事件侦听器附加到元素，并在单击事件回调中从元素中删除class

play

，改为应用class

pause

，反之亦然

---

MDN有关于如何将事件侦听器附加到元素的详细信息。并讨论如何在元素上添加/删除类。

如果只想检测第一次单击，可以在纯CSS中通过给链接一个id并使用：target伪类（例如a#theid:target{…}）来实现这一点

但由于需要检测第二次单击，因此需要使用JS在CSS类之间切换。基本方法是使用事件处理程序：

document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};

---

我举了一个简单的例子。我使用背景色和锚，但你可以在你的情况下轻松实现这一点

更新 更新代码，使其使用您的图像

HTML

而JS：

$(document).ready(function() {
    $(".play_pause").click(function() {
        $(this).toggleClass('playing');
    });
});​​

​

使用和的示例，以及您的。没有使用jQuery

var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
    e.addEventListener('click', function () { // this fn generates the listener
        var pause = false; // captured in scope, not global
        return function () { // this is the actual listener
            this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
        }
    }(), false); // the () invokes the generator

---

他说他想要它，反之亦然=）基本上，每次点击图像都需要改变。最初显示图像1，单击图像2后，单击图像1，单击图像2等。是的，这就是此处发生的情况

播放
类是您的图像2 bg位置查看@Sven post的方式相同只是这是一个简短的syntaxtoggleClass（）添加和删除给定的类。另一个提示是不需要定义两次
高度
和
宽度
。您的悬停css状态不需要它们，它们已经从您的第一句话中应用：）非常感谢，这很好。但是，我还需要将其链接到音频播放器。我可以通过将.stratus作为一个类包含在音频链接中来实现这一点。如何将其合并到上述代码中？音频链接看起来像这样的“class=”stratus“>，所以我想我需要更改CSS，使它引用两个类的元素例如，我如何编辑JS来反映这一点？@Lukebobyer这听起来像是一个新问题；）我不知道soundcloud链接是如何工作的，也不知道你在使用什么。好的，谢谢，我只是改变了一些类，使之与.stratus类一起工作。
.play_pause {
    display: block;
    width: 24px;
    height: 23px;
    text-indent: -99999px;
    background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png); 
    cursor: pointer;
}

.playing {
    background-position: -27px 0; 
}

.playing:hover {
    background-position: -27px -28px !important; 
}

.play_pause:hover {
    background-position: 0 -28px; 
}​

$(document).ready(function() {
    $(".play_pause").click(function() {
        $(this).toggleClass('playing');
    });
});​​

var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
    e.addEventListener('click', function () { // this fn generates the listener
        var pause = false; // captured in scope, not global
        return function () { // this is the actual listener
            this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
        }
    }(), false); // the () invokes the generator