removeClass函数不起作用

时间:2014-08-21 15:48:50

标签: jquery html

我想删除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>

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

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

$(".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。他提醒我这件事!

答案 2 :(得分:0)

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

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

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