Question

我正在尝试使用JQuery click事件来删除一个类并添加一个不同的类，但我的SVG对象没有按预期更改填充。

 $(".seat").click(function (event) {
      var result = $(this).data("seat");
      var state = $(this).data("state");
      $(this).removeClass( "seat" ).addClass( "taken" );
       result = result +" - "+ state;
       $("#statusBox").html(result);

       });

我的JS小提琴是Here

Answer 1

不幸的是，class对于SVG标记的作用与对标准HTML的作用不同，至少在jQuery方面如此。不要像对待类一样对待它，而是需要将其视为属性。

$(".seat").on('click',function(e){
    var $this = $(this),
        $data = $this.data();

    $this.attr('class','taken');

    $("#statusBox").html($data.seat +" - "+ $data.state);
});

由于您要删除当前唯一的课程并为其提供新课程，因此我只是将class的属性指定为taken的新值。如果您的实际代码对于多个类名更复杂，您可能需要具有创造性，但概念保持不变...替换该属性的字符串值的那一部分。

我还更新了你的代码以提高效率，希望很酷。 Here is the working jsFiddle.

Answer 2

我不认为addClass()或removeClass()使用svg。如果我没记错，您需要使用.attr()

<强> Demo Fiddle

JS：

$(".seat").click(function (event) {
       var result = $(this).data("seat");
       var state = $(this).data("state");
       $(this).attr('class', 'taken');
       result = result +" - "+ state;
       $("#statusBox").html(result);                     
});

使用JQuery我无法删除类并将类添加到我的SVG

2 个答案: