jQuery:单击时更改文本和类，同时保留子元素

Question

我正在尝试使用 jQuery 做一个简单的“切换”功能，但我似乎无法让它以正确的方式工作。

我有一个如下所示的 HTML block :

<li class="item-actions-follow">
    <a href="#" id="follow" class="icon small-icon circle_plus">
        <i></i>
            Follow
    </a>
</li>

我想，当用户单击“关注”链接时，可以更改 href 上的类 circle_plus标记为circle_minus，并将文本关注更改为取消关注，反之亦然。

我尝试了一些不同的东西，但它们都很接近，但不完全是我想要的。

在 jQuery 事件“onclick”中我这样做:

var text = $("a#follow").text() == 'Follow' ? 'Unfollow' : 'Follow';
$("a#follow").text(text);

这确实将文本“关注”更改为“取消关注”，但当我再次单击该链接时却没有变回来并且它删除了标签 <i></i>这本质上是显示由 circle_plus 类提供的图标。

我也尝试过做一个纯粹的Toggle(后来我发现Toggle函数对文本不起作用，只能对属性起作用)，如下所示:

$("a#follow").toggle
function() {
$("a#follow").text("Unfollow");
$(this).removeClass('circle_plus').addClass('circle_minus').stop();
      },
      function() {
        $("a#follow").text("Follow");
        $(this).removeClass('circle_minus').addClass('circle_plus').stop();
      });

当我执行此操作并单击链接时，它只是将文本和图标一起“淡出”，甚至不会更改类。

我还尝试了 .toggleClass()功能但运气不好。

我对 jQuery 比较陌生，所以这可能是一个简单的任务，但我已经广泛寻找解决方案，但到目前为止还没有运气。

希望您能帮助我指明正确的方向。

Answer 1

将文本包裹在跨度内:<a id="follow"><i></i><span>follow</span></a>

我会用老式的方式来做:

$('#follow').click(function() {
    if ($(this).hasClass('circle_plus')) {
        $(this).removeClass('circle_plus').addClass('circle_minus').find('span').text('unfollow');
    }
    else {
        // vice versa
    }
});