个性化Facebook之类的按钮

Question

我正在Wordpress中创建一个应用程序，用户在喜欢视频后下载视频。视频就像帖子一样。我有Facebook喜欢的按钮，但如果用户喜欢这个帖子，我想将按钮更改为下载。知道我应该怎么做？感谢。

Answer 1

只需将Facebook Like按钮放在与下载按钮相同的位置，例如将它们放在一个共同的div元素中：

<div id="like_download_container">
    <div id="fb-like></div>
    <div id="download_button><!-- button code here --></div>
</div>

并将下载按钮的z-index值设置为-1。然后，将Javascript中的事件绑定到Like按钮上的click事件，然后将z-index压缩为2。

使用jQuery（好吧，即使没有，但jQuery使其更简单），你甚至可以应用一个漂亮的动画。因为你无法真正为z-index更改设置动画（它只会让底部元素在通过第二个z-index值时突然出现），所以我的想法是使用不透明度：

$('#download_button').css({
    'opacity' : '0',
    'z-index' : '2'
});
$('#download_button').animate('opacity', '1');