jQuery：在保留子元素的同时单击更改文本和类

我试图用jQuery做一个简单的“切换”式函数，但我似乎无法让它以正确的方式工作

我有一个HTML块，如下所示：

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

$("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();
      });

这确实将文本“Follow”更改为“Unfollow”，但在我再次单击链接时没有返回，它删除了标签

，该标签主要用于显示圆圈加类提供的图标

我还尝试了纯切换（后来我发现切换函数不适用于文本，而只适用于属性），如下所示：

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

$("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比较陌生，所以这可能是一项简单的任务，但我一直在寻找解决方案，但迄今为止运气不佳

---

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

将文本包装在span:

follow

我会用老办法：

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

---

因为您没有将该元素包装到另一个元素中，所以其中有空内容

只需添加

.trim（）

这应该很好

$('#follow').on('click', function () {
    var $elem = $("#follow");
    $elem.text().trim() === 'Follow' ? $elem.text('UnFollow')
                                     : $elem.text('Follow');
    $elem.toggleClass('circle_plus circle_minus')
});

或者，您可以这样做，减少您的
js
“开销”（虽然很少）。如您所见，我对标记做了一些更改

HTML:

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

是否将其包装在单击函数处理程序中？
看看这把小提琴，它正在工作


HTML


CSS

JS

你能提供一个有效的例子吗？
#follow.circle_plus{background-color:red;}

$("a#follow").click(function(){
var link = $("a#follow");
var text = link.text() == 'Follow' ? 'Unfollow' : 'Follow';
link.text(text);
link.toggleClass('circle_plus');
return false;});