永发信息网

jquery如何实现点击按钮,按钮上面显示一个“+1”的提示

答案:4  悬赏:60  手机版
解决时间 2021-02-08 14:25
  • 提问者网友:美人性情
  • 2021-02-07 16:47
使用的是zblog-php版本,安装了赞分享插件,稍微修改了一下,在文章显示页,可以正常显示(点击按钮---如“好笑”“无聊”评价-----,按钮的数字会加1,同时按钮上面会显示一个“+1”的动画。<br>但是在列表页,不能正常。评价的数字可以正常“+1”,但是“+1”的动画只能在第一个“楼层”显示,其他“楼层”的点击动画都在第一个楼层。<br><br>里面的js文件如下(sf_praise.js):<br><br>jQuery(document).ready(function($){ <br>$(document).delegate(&quot;.sf-praise-list li&quot;,&quot;hover&quot;,function(event) {<br>$(this).toggleClass(&quot;sf-praise-item-hover&quot;);<br>});<br>$(document).delegate(&quot;.sf-praise-list li&quot;,&quot;click&quot;,function(event) {<br>var read=$(this).attr(&quot;data-read&quot;);<br>var postid=$(this).attr(&quot;data-postid&quot;);<br>var value=$(this).attr(&quot;data-value&quot;);<br>var numid = &quot;num&quot;+postid;<br>if(read==&quot;1&quot;){<br>alert(&quot;你已经投过一次了,还想投么( ̄口 ̄)!!!&quot;);<br>return;<br>}else{<br>$.ajax({<br>type:'post',<br>async:true,<br>url:bloghost + &quot;zb_users/plugin/sf_praise/save.php&quot;,<br>data:{<br>sf_praise_value:value,<br>postid:postid<br>},<br>timeout:30000,<br>dataType:'html',<br>complete:function(){<br>},<br>success:function(data){<br>if(data==&quot;ok&quot;){<br>var ob=$(&quot;.sf-praise-list li[data-value='&quot;+value+&quot;']&quot;).find(&quot;span[type='&quot;+numid+&quot;']&quot;);<br>var sint=parseInt(ob.html(),10);<br>sint++;<br>ob.html(sint);<br>$.tipsBox({ <br>obj: $(&quot;.sf-praise-list li[data-value='&quot;+value+&quot;']&quot;), <br>str: &quot;+1&quot;<br>}); <br>}else{<br>alert(&quot;你已经投过一次了,还想投么( ̄口 ̄)!!!&quot;);<br>}<br>}<br>});<br>}<br>});<br>$.extend({ <br>tipsBox: function(options) { <br>options = $.extend({ <br>obj: null, //jq对象,要在那个html标签上显示 <br>str: &quot;&lt;b style='font-family:Microsoft YaHei;'&gt;+1&lt;/b&gt;&quot;, //字符串,要显示的内容;也可以传一段html,如: &quot;&lt;b style='font-family:Microsoft YaHei;'&gt;+1&lt;/b&gt;&quot; <br>startSize: &quot;12px&quot;, //动画开始的文字大小 <br>endSize: &quot;30px&quot;, //动画结束的文字大小 <br>interval: 600, //动画时间间隔 <br>color: &quot;red&quot;, //文字颜色 <br>callback: function() {} //回调函数 <br>}, options); <br><br>var numid=&quot;num47492&quot;;<br><br>$(&quot;body&quot;).append(&quot;&lt;span class='&quot;+numid+&quot;'&gt;&quot;+ options.str +&quot;&lt;/span&gt;&quot;); <br>var box = $(&quot;.&quot;+numid); <br>var left = options.obj.offset().left + options.obj.width() / 2; <br>var top = options.obj.offset().top - options.obj.height(); <br>box.css({ <br>&quot;position&quot;: &quot;absolute&quot;, <br>&quot;left&quot;: left + &quot;px&quot;, <br>&quot;top&quot;: top + &quot;px&quot;, <br>&quot;z-index&quot;: 9999, <br>&quot;font-size&quot;: options.startSize, <br>&quot;line-height&quot;: options.endSize, <br>&quot;color&quot;: options.color <br>}); <br>box.animate({ <br>&quot;font-size&quot;: options.endSize, <br>&quot;opacity&quot;: &quot;0&quot;, <br>&quot;top&quot;: top - parseInt(options.endSize) + &quot;px&quot; <br>}, options.interval , function() { <br>box.remove(); <br>options.callback(); <br>}); <br>} <br>}); <br>});
最佳答案
  • 五星知识达人网友:冷風如刀
  • 2021-02-07 17:25
看了bai你这个点赞插件,他已经写好了css和html。只要你du没改动错误的情况下,zhi是否是+1这个的html父级没有加上position:relative;。所以导致他的位置dao不对,因为这个是获取你版当前点击这个点赞插件第几个的位置来显权示的,你试试看
全部回答
  • 1楼网友:一袍清酒付
  • 2021-02-07 19:43
啊好晕,同求
  • 2楼网友:蓝房子
  • 2021-02-07 18:50
+1
  • 3楼网友:归鹤鸣
  • 2021-02-07 18:32
123456789
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
点此我要举报以上问答信息
大家都在看
推荐资讯