javascript - jQuery 点击显示/隐藏功能不正常

Question

我目前正在 this link 创建一个页面.我在我的标题中使用了这个 javascript(在我的 CSS 下方):

<script type="text/javascript" src="http://static.tumblr.com/txc9jrr/yNxmd3lq6/jquery.js">   
</script>

<script type="text/javascript">
$('.toggle').click(function(){
    var $tr = $(this).closest('tr');
    $tr.add($tr.next('.edit')).toggle();
});
$('.cancel').click(function(){
    var $tr = $(this).closest('tr');
    $tr.add($tr.prev('.view')).toggle();
});​
</script>

和这个 HTML:

<table>
  <tr class="view">
      <td>
          <a class="toggle" class="icon-button" href="#">Edit</a>
      </td>
  </tr>
  <tr class="edit" style="display:none">
      <td>
          hi
          <a class="cancel" href="#">Cancel</a>
      </td>
  </tr>
</table>

理论上，它应该可以工作...但是当我将它实现到我的页面中时，它就停止工作了。有人知道我的问题是什么吗？

Answer 1

改变

<a class="toggle" class="icon-button" href="#">Edit</a>
   // ^--------------^---------------------Cannot define two classes like this

到

<a class="toggle icon-button" href="#">Edit</a>
 //  ^--------------------------------Try like this

DEMO