Question

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

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

<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);

这确实将文字“关注”更改为“取消关注”，但是当我再次点击链接并时，它取消了标记，这基本上是显示图标由 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">follow</a>

我是以老式的方式做的：

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

Answer 2

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

只需添加.trim()即可删除空白区域。

这应该是好的

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

<强> Check Fiddle

Answer 3

你在click函数处理程序中包装它吗？看看这个工作的小提琴

http://jsfiddle.net/qq8f3/5/

HTML

<a href="#" id="follow">Follow</a>

CSS

#follow.circle_plus{background-color:red;}

JS

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

Answer 4

或者，你可以做这样的事情，减少你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>

<强> JS / jQuery的

$("a#follow").click(function(){
    $(this).children("span").toggle();
});

Test Link

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

4 个答案: