Question

我已经完成了几个类似于我的问题，并试图实施他们的解决方案，但我还没有设法让任何工作。

这是我在我的实际网站上使用的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

Answer 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?

Answer 2

在您的网站上，很多JS错误即将停止，这些错误会阻止您的脚本执行。首先解决这些错误，它应该可以正常工作。

Answer 3

可能是由于某些无效的标记造成的。

如果你看一下你的jsFiddle，你就会错过在几个</g>标签内关闭<svg />个标签。

您可以判断，因为结束</svg>标记为红色。

您还重复了<g id="circle">次。

您不能拥有多个具有相同ID的元素。

Answer 4

我最终得到了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

jQuery addClass适用于jsfiddle，但不适用于live

4 个答案: