jQuery .toogleClass 函数来切换元素 class 并在事件期间做一些事情

Question

我正在尝试使用 jQuery toogleClass 来切换元素。我想从关注图标切换到取消关注图标，并在每次点击时做一些事情（比如 ajax 呼叫、提醒或其他）。所以我打算做的是使用 toogleClass(function(){}) 来实现这个功能。

HTML:

    <a class="follow button tiny circle">
        <i class="fa-2x fa fa-eye"></i>
    </a>

JS:

    $("div.up-right a").click(function(){

    $(this).find("i").toggleClass(function(){
        if($(this).parent().hasClass("follow")){
            $(this).parent().removeClass( "follow" ).addClass( "unfollow" );
            return "fa-eye-slash";
        }else {
            $(this).parent().removeClass( "unfollow" ).addClass( "follow" );
            return "fa-eye";
        }

});

我想做的是当我点击时，我想改变 class 在父级（关注<->取消关注）和（fa-eye 到 fa-eye-slash）并做一些事情。

请看看这个fiddle

注意：我正在关注这个jquery .toggleClass doc

Answer 1

您可以创建一个简单的切换函数并为其指定一个元素，class要设置的名称和要取消设置的 class名称。如果 parent 有 class 'follow'，您可以设置 'unfollow' 并取消设置 'follow'。 child 也是如此。只需确保将正确的元素传递给函数即可。

$(".up-right a").click(function(){
    $(this).hasClass('follow') ? toggle($(this), 'unfollow', 'follow')
                               : toggle($(this), 'follow', 'unfollow');
    $(this).hasClass('follow') ? toggle($(this).find('i'), 'fa-eye', 'fa-eye-slash')
                               : toggle($(this).find('i'), 'fa-eye-slash', 'fa-eye');
});

function toggle (el, set, unset) {
    $(el).addClass(set);
    $(el).removeClass(unset);
}

jQuery .toogleClass 函数来切换元素 class 并在事件期间做一些事情

jQuery .toogleClass function to toggle elements class and do something during the event

html

javascript

jquery

toggle