jquery 编写顶和踩功能

最新推荐文章于 2021-03-09 23:42:08 发布

原创最新推荐文章于 2021-03-09 23:42:08 发布 · 558 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #js

jquery 同时被 2 个专栏收录

5 篇文章

订阅专栏

3 篇文章

订阅专栏

本文详细介绍了如何在页面上实现用户互动的顶踩投票系统，包括按钮样式、交互逻辑及数据更新流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们在页面上放置“顶”和“踩”的按钮，即#dig_up和#dig_down，按钮上分别记录了投票的票数以及所占的百分比。
<div
class="digg"> 
    <div
 id="dig_up"

class="digup">
        <span
 id="num_up"></span>
        <p>很好，很强大！</p>
        <div
 id="bar_up"

class="bar"><span></span><i></i></div>
    </div>
       <div
 id="dig_down"

class="digdown">
        <span
 id="num_down"></span>
        <p>太差劲了！</p>
        <div
 id="bar_down"

class="bar"><span></span><i></i></div>
    </div>
    <div
 id="msg"></div>
</div>
$(function(){
    //当鼠标悬浮和离开两个按钮时，切换按钮背景样式
    $("#dig_up").hover(function(){
        $(this).addClass("digup_on");
    },function(){
        $(this).removeClass("digup_on");
    });
    $("#dig_down").hover(function(){
        $(this).addClass("digdown_on");
    },function(){
        $(this).removeClass("digdown_on");
    });
      
    //初始化数据
    getdata("ajax.php",1);
      
    //单击“顶”时
    $("#dig_up").click(function(){
        getdata("ajax.php?action=like",1);
    });
    //单击“踩”时
    $("#dig_down").click(function(){
        getdata("ajax.php?action=unlike",1);
    });
});