Javascript 如何更改按钮'；什么样的风格？

我有一个订阅按钮，一旦点击（并成功订阅）；我想我的代码显示直接取消订阅。所以，我为每个按钮设置了两个不同的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}

---

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

您可以通过一个简单的if/else子句和jQuery.attr（）函数来实现这一点。 有两种方法可以做到这一点，选择链接的父级或更好的方法： 向具有id的div元素添加一个类（如subscribe按钮）

该类的操作方式如下所示：

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

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

如果要使用类名执行此操作，请执行以下操作：

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

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

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

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

---

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

从长远来看，更改id可能没有帮助

---

在单击事件时始终可以使用更改class属性

更改

id

属性不是一个好主意。考虑更改<代码> CalpNeX< /Cord>属性：或者您可以更改类属性值：@ kRuMua，我阅读了这些问题，但我不知道如何将它们应用到我的代码中。甚至更好的方法是使用两个分离的按钮，用两个单独的ID，然后切换可视性。更改ID就像拿着你的灵魂，把别人的灵魂放进你的身体。正如上面评论中所建议的，切换类名是一种更好的方法