javascript - 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)并执行某些操作。

请看一下这个fiddle

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

Answer 1

您可以创建一个简单的切换函数，并为其指定一个元素、要设置的类名和要取消设置的类名。如果父级有“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);
}