如何更改按钮的样式？

Question

我有一个订阅按钮，一旦单击（并成功订阅）； 我希望我的代码直接显示退订。 因此，我为每个按钮设置了两个不同的div，我认为我们可以在它们之间进行切换。

<div id ="subscribe_everything">
{if !$userquery->is_subscribed($u.userid)}
<a onclick="subscriber('{$u.userid}','subscribe_user','subscribe_result_cont')" class="yt-uix-subscription-button yt-can-buffer yt-uix-button yt-uix-button-subscribe-branded yt-uix-button-size-default yt-uix-button-has-icon" title="Subscribe To {$u.username}" >
<span class="subscribe-label" aria-label="Subscribe">
Subscribe
</span>
</a>  
</div>
{else}
<div id ="unsubscribe_everything">
<button class="yt-uix-subscription-button yt-can-buffer yt-uix-button yt-uix-button-subscribed-branded yt-uix-button-size-default yt-uix-button-has-icon" onclick="subscriber('{$u.userid}','unsubscribe_user','subscribe_result_cont')" type="button" aria-role="button" aria-busy="false" >
<span class="subscribed-label" aria-label="Unsubscribe">
Subscribed
</span>
<span class="unsubscribe-label" aria-label="Unsubscribe">
Unsubscribe
</span>
</button> 
</div>              
{/if}

因此，基本上，我要寻找的是一旦用户单击“订阅”（或相反），将div的ID从“ subscribe_everything”更改为“ unsubscribe_everything” 。 这是onclick调用的函数：

function subscriber(user,type,result_cont)
    {
            $.post(page, 
        {   
            mode : type,
            subscribe_to : user
        },
        function(data)
        {
            if(!data)
                alert("No data");
            else
            {
            }
        },'text');
    }

我怀疑我们可能需要使用jquery的切换功能（并切换ID），但是我不知道在哪里添加它以及如何添加它。 我也在寻找一种快速的方法，我不想让客户花10秒钟让div切换。

Answer 1

您可以使用简单的if / else子句和jQuery .attr（）函数来完成此操作。 有两种方法可以执行此操作，方法是选择链接的父级或更好的方法：将一个类添加到具有id的div元素中（例如subscribe-button）。

类的方式可以这样完成：

if ($('.subscribe-button').attr('id') == 'subscribe_everything') {
    $('.subscribe-button').attr('id', 'unsubscribe_everything');
} else {
    $('.subscribe-button').attr('id', 'subscribe_everything');
}

如果要使用classNames进行操作，请按照以下步骤操作：

if ($('#subscribe_everything').hasClass('subscribed')) {
    $('#subscribe_everything').removeClass('subscribed');
} else {
    $('#subscribe_everything').addClass('subscribed');
}

或使用toggleClass函数，如user3895968建议：

$('#subscribe_everything').toggleClass('subscribed');

这样，您不必添加新类或将其删除（如果已取消订阅）到div元素。

Answer 2

从长远来看，更改ID可能无济于事。

您始终可以使用toggleClass更改class属性onclick事件