如何更改按鈕的樣式？

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事件