2

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

我有一个看起来像这样的 HTML 块：

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

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

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

在 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 比较陌生，所以这可能是一项简单的任务，但我已经广泛寻找解决方案，但到目前为止还没有运气。

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

4

4 回答 4

3

将文本包装在 span 内：<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
    }
});
于 2013-05-22T07:55:41.523 回答
0

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

只需添加.trim()以删除空白空间..

这个应该不错

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

检查小提琴

于 2013-05-22T08:01:20.250 回答
0

您是否将其包装在 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;});
于 2013-05-22T08:11:24.370 回答
-1

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

测试链接

于 2013-05-22T08:06:32.113 回答