您如何摆脱 "pressed" class 点击 <div> 时随机弹出的问题？

Question

我目前有一个 div，我正试图将其制作成一个点赞按钮，单击它时它会切换到另一个图像，再次单击时又会返回......

我遇到了一个问题，每次我点击 div 图片时，它都会添加一个名为 "pressed" 的 class，而第二张图片只会保留到我松开手指为止的左键单击。

我正在使用 phonegap 和 Intel 移动框架来帮助 html、css 和 javascript。

有没有什么方法可以禁止点击时弹出这个功能，或者我能做些什么来用更简单的方法让两张图片在点击时交换？

感谢您的帮助。我对此有点陌生。

HTML

<td align="right">
   <div class="like_button"></div>
</td>

CSS

    .like_button {
    background-color: transparent;
    border-color: transparent;
    border:0px;
    background-image: url(../img/like_button.png);
    background-size: 52px 52px;
    height: 52px;
    width: 52px;
}

    .like_button:active {
    background-image: url(../img/liked_button.png);
    background-size: 52px 52px;
    height: 52px;
    width: 52px;
}

JAVASCRIPT

jQuery('like_button').click(function(){
   jQuery(this).toggleClass('active');
});

Answer 1

您需要将 CSS 中的 .like_button:active 更改为 .like_button.active。

而且 jQuery('like_button') 在 jQuery 代码中应该是 jQuery('.like_button')。

Answer 2

就像 lmgonzalves 在评论中所说的那样，我认为问题与 :active 伪选择器有关，它主要用于在它时改变元素的状态正在被激活（被点击或以其他方式激活），因此当您将手指移开时，您会体验到瞬间效果。

相反，您应该删除伪选择器并使用像 .like_button.clicked 这样的简单 class 选择器来处理状态更改 CSS。

你可以在这里看到演示：https://jsfiddle.net/k135g025/

希望对您有所帮助！

您如何摆脱 "pressed" class 点击 <div> 时随机弹出的问题？

How do you get rid of a random "pressed" class popping up on <div> click?

html

javascript

css

phonegap-build

phonegap-desktop-app