我已经完成了几个类似于我的问题,并试图实施他们的解决方案,但我还没有设法让任何工作。
这是我在我的实际网站上使用的js代码:
jQuery(function($){
$(".icon_circle").click(function () {
$('circle').removeClass('clicked');
$(this).addClass('clicked');
});
});
以下是jsfiddle:http://jsfiddle.net/AKXTV/3(改编自jQuery SVG removeClass())
以下是我的实际网站:http://watchcampfire.com/pre
编辑:看起来它也没有在bootply中工作,因此它可能与它的一些Bootstrap编码一起工作。 http://www.bootply.com/120685
答案 0 :(得分:1)
我没有看到像你这样初始化swiper插件的地方(根据他们的网站):
$(function(){
var mySwiper = $('.swiper-container').swiper({
//Your options here:
mode:'horizontal',
loop: true
//etc..
});
})
因为您似乎没有那个,这可能是Uncaught TypeError: Cannot read property 'classList'
未定义错误的原因。修复应该让事情适合你。
更新:
我想我在这里找出问题的根本原因。
这应该有效:
$('.icon_circle').on('click', function() {
$('.icon_circle').attr('class', function(index, classNames) {
//this is sort of lazy, oh well
return 'icon_circle';
});
$(this).attr('class', function(index, classNames) {
return classNames + ' clicked';
});
});
在SVG元素上添加/删除类有一些问题。
此处提供更多详细信息:jQuery SVG, why can't I addClass?
答案 1 :(得分:0)
在您的网站上,很多JS错误即将停止,这些错误会阻止您的脚本执行。首先解决这些错误,它应该可以正常工作。
答案 2 :(得分:0)
可能是由于某些无效的标记造成的。
如果你看一下你的jsFiddle,你就会错过在几个</g>
标签内关闭<svg />
个标签。
您可以判断,因为结束</svg>
标记为红色。
您还重复了<g id="circle">
次。
您不能拥有多个具有相同ID的元素。
答案 3 :(得分:0)
我最终得到了PencilScoop的帮助。
这是完美的工作解决方案,根本不涉及JS。
我包装了我的SVG,就像这样:
<input type="radio" id="v" name="button" value="video">
<label for="v">
<!-- SVG CODE -->
</label>
然后将其添加到CSS:
input[type="radio"]:checked + label #shape_ID {
stroke: #EF4137
}
请在此处查看工作代码: http://jsfiddle.net/3KnXF/5