Question

我想删除html代码中的类。所以我在Jquery中使用removeClass函数。但是，它不起作用。为了在代码中更具体，我想在单击删除按钮时让图形的不透明度变为0（消失）。但它什么都没做。我不知道那里有什么问题。任何人都可以解释一下吗？提前谢谢！

这是Jsfiddle Link 这是真实的代码：

<!DOCTYPE html>
<html>
<head>

   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script type="text/javascript">

  function remove_R() {
      $(".me rect").removeClass("rect_obvious");
  }

  </script>
  <style type="text/css">
  .rect_style {
     stroke:black;
     stroke-width:5;

  }
  .rect_color_1{
      fill:#FFC863;
  }

  .rect_obvious{
        opacity:1;
  }  

  .rect_none{
    opacity: 0;
  }
  </style>
</head>


<body>

<svg class="me" width="145" height="65"><rect  class="rect_style rect_color_1 rect_obvious" x="3" y="3" rx="20" ry="20"  width="140" height="60" ></svg>
<button onclick="remove_R()">remove</button>

</body>
</html>

Answer 1

元素rect包含课程rect_obvious而非.me。所以请使用：

 $(".me rect").removeClass("rect_obvious");

Answer 2

当我更改代码时它会起作用：

$(".me rect").removeClass("rect_obvious");

成：

$(".me rect").attr("class", "rect_obvious rect_none");

注意：The Jsfiddle link

removeClass，addClass和toggleClass不适合SVG。

这个问题类似于：jQuery SVG, why can't I addClass?

谢谢，Jay Blanchard。他提醒我这件事！

Answer 3

除了访问错误节点$('.me')的问题之外，另一个问题是你使用svg标签是“特殊的”，jQuery为hasClass返回false。

围绕它来解决类属性，修改它然后将其设置为新值。

http://jsfiddle.net/qn079oqa/4/

removeClass函数不起作用

3 个答案: