为什么. addclass()和. removeclass()不能按预期工作?

我已经谷歌和谷歌以及搜索Stackoverflow。在看了大约24个其他问题并没有看到相同的情况后，我决定发布一个新的问题。

我不需要别人的帮助。我只是想了解为什么不起作用。这对我来说毫无意义。所以，我的问题是:

为什么保存jQuery对象到一个变量导致.addClass()/.removeClass()不工作?

---

我想做什么

我有一个fa fa-eye类的span，我想将fa-eye类更改为fa-eye-slash，然后再次单击按钮。

---

什么不工作

这是我的HTML:

<button id='visibility-toggle' data-status='hidden'>
  <span class='fa fa-eye'></span>
  Show
</button>

这里是我的不工作 JavaScript:

jQuery('#visibility-toggle').click(function(e){
  e.preventDefault();
  var button = jQuery(this);
  var icon = button.find('.fa');
  if(button.data('status') === 'hidden') {
    show_stuff();
    button.html(button.html().replace('Show', 'Hide'));
    icon.addClass('fa-eye-slash');
    icon.removeClass('fa-eye');
    button.data('status', 'visible');
  } else {
    hide_stuff();
    button.html(button.html().replace('Hide', 'Show'));
    icon.addClass('fa-eye');
    icon.removeClass('fa-eye-slash');
    button.data('status', 'hidden');
  }
});

字符串替换正常工作，显示/隐藏功能正常工作。添加/删除类功能无法工作。

我也试过做这些改变。

HTML:

  <span class='show-icon fa fa-eye'></span>

JS:

  var icon = jQuery('.show-icon');

…还是不行

---

什么在工作

BUT这是关键。这个工作(不是将jQuery对象保存到icon变量，而是每次都查找它):

jQuery('#visibility-toggle').click(function(e){
  e.preventDefault();
  var button = jQuery(this);
  if(button.data('status') === 'hidden') {
    show_stuff();
    button.html(button.html().replace('Show', 'Hide'));
    jQuery('.show-icon').addClass('fa-eye-slash');
    jQuery('.show-icon').removeClass('fa-eye');
    button.data('status', 'visible');
  } else {
    hide_stuff();
    button.html(button.html().replace('Hide', 'Show'));
    jQuery('.show-icon').addClass('fa-eye');
    jQuery('.show-icon').removeClass('fa-eye-slash');
    button.data('status', 'hidden');
  }
});

所以，我的问题是:为什么保存jQuery对象到一个变量导致.addClass()/.removeClass()不工作?

我已经使用jQuery很多年了，以前从来没有注意到这个行为。这似乎很奇怪。我是不是错过了一些非常简单的东西?我是不是太累了?

---

附加信息

我在Ubuntu 14.04.3上的Google Chome Version 45.0.2454.85 (64-bit)中看到了这种行为。我没有尝试过其他浏览器或其他系统。

我使用jQuery 2.1.3从:https://code.jquery.com/jquery-2.1.3.min.js

如果我在控制台中运行此代码，它将按预期工作。

var icon = jQuery('.show-icon');
icon.addClass('fa-eye-slash');
icon.removeClass('fa-eye');
icon.addClass('fa-eye');
icon.removeClass('fa-eye-slash');

当我在控制台中设置console.log(icon)和console.log(jQuery('.show-icon'))时，它们看起来完全一样。

[span.show-icon.fa.fa-eye, prevObject: n.fn.init[1], context: document, selector: ".show-icon"]

我可以前后切换代码，一种方式可以工作，另一种方式不可以。

---

编辑:这是现在工作的预期

HTML:

<button id='visibility-toggle' data-status='hidden'>
  <span class='fa fa-eye'></span>
  <span class='text'>Show</span>
</button>

JS:

jQuery('#visibility-toggle').click(function(e){
  e.preventDefault();
  var button = jQuery(this);
  var icon = button.find('.fa');
  var text = button.find('.text');
  if(button.data('status') === 'hidden') {
    show_stuff();
    text.text(text.text().replace('Show', 'Hide'));
    icon.addClass('fa-eye-slash');
    icon.removeClass('fa-eye');
    button.data('status', 'visible');
  } else {
    hide_stuff();
    text.text(text.text().replace('Hide', 'Show'));
    icon.addClass('fa-eye');
    icon.removeClass('fa-eye-slash');
    button.data('status', 'hidden');
  }
});

我知道它很丑。我明天早上再重构。