jQuery .toogleClass函数可在事件期间切换元素类并执行某些操作

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";
        }

});

我想做的是单击鼠标，然后更改父级中的类（跟随<->取消跟随）和（从fa-eye到fa-eye-slash）并执行某些操作。

请看这个小提琴

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

Answer 1

您可以创建一个简单的切换功能，并为其提供一个元素，要设置的类名和要取消设置的类名。 如果父母的班级是“跟随”，则可以设置“取消关注”和取消设置“跟随”。 孩子也一样。 只要确保将正确的元素传递给函数即可。

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