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 更改为取消订阅_一切 。这是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更改类属性onclick事件

如何更改按钮的样式？

2 个答案: