[英]toggle CSS class on click using jQuery does not work
I try to do the following: 我尝试执行以下操作:
When I click on a specific DIV a CSS class is added/removed from another DIV. 当我单击一个特定的DIV时,将在另一个DIV中添加/删除CSS类。
Take a look here for a live example (and click on "click me"): 在这里查看一个实时示例(然后单击“单击我”):
http://jsfiddle.net/fyehLqsc/ http://jsfiddle.net/fyehLqsc/
$(document).ready(function() {
$(".mejs-play").click(function () {
$(".spin-l").toggleClass("animated");
$(".spin-r").toggleClass("animated");
});
});
It is working as it should, but when I do the same thing on my WordPress site, it's not working. 它可以正常工作,但是当我在WordPress网站上执行相同操作时,它就无法工作。
Take a look here: 在这里看看:
link removed 链接已删除
What I want to achieve: If someone clicks on the play button which has the class "mejs-play" the class "animated" shall be added to "spin-l" and "spin-r". 我要实现的目标:如果有人单击具有“ mejs-play”类的播放按钮,则将“动画”类添加到“ spin-l”和“ spin-r”中。
Can anyone please tell me why it's working on JSFiddle but not on my site? 谁能告诉我为什么它可以在JSFiddle上运行而不在我的网站上运行?
jQuery is running in noconflict-mode in wordpress, you can't access it via $
jQuery在wordpress中以noconflict-mode运行,您不能通过$
访问它
Use this: 用这个:
jQuery(document).ready(function($) {
$(".mejs-play").click(function () {
$(".spin-l").toggleClass("animated");
$(".spin-r").toggleClass("animated");
});
});
Edit: 编辑:
as it seems the Medialelement-library stops the propagation of the click-event. 似乎Medialelement库停止了点击事件的传播。
This works for me: 这对我有用:
jQuery(document).ready( function ($) {
$('audio').on('play pause',function(e){
$(this).closest('.current-cast').prevAll('.cassette').last()
.find(".spin-l,.spin-r").toggleClass("animated",e.type==='play');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.