首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >节点js中的向上投票向下投票功能

节点js中的向上投票向下投票功能
EN

Stack Overflow用户
提问于 2018-12-06 04:37:23
回答 1查看 641关注 0票数 0

我很难找到一种好的方法来实现在前端和express后端使用Pug(jade)的向上投票/向下投票功能。我当前的设置如下所示。我循环遍历mongo db中的项目以显示评级项目。

代码语言:javascript
复制
each val in post['listitem']
    div.listitem
       .rating_button
         .buttons
           button(class='up' aria-pressed="false") Upvote
           p#vote 0 //currently 0 later data from db
           button(class='down' ariapressed="false")Downvote

然后,我有一个客户端ajax调用到我的api

代码语言:javascript
复制
$(document).ready(function(){
    $(document).on('click', '.up', function(){
        var up = $.post("/api/:id/upvote", {changeBy: 1}, function(dataBack){
            $("#vote").text(dataBack); 
        });
    });
    $(document).on('click', '.down', function(){
        var down = $.post("/api/:id/downvote", {changeBy: 1},
        function(dataBack){
            $("#vote").text(dataBack);
        });
      });
    });

Api看起来是这样的--首先是siteController

代码语言:javascript
复制
exports.upvote = async (req, res) => {
res.setHeader("Content-Type", "application/json");
vote += parseFloat(req.body.changeBy);
res.write(JSON.stringify(vote));
res.end();
console.log(vote);}

exports.downvote = async (req, res) => {
res.setHeader("Content-Type", "application/json");
vote -= parseFloat(req.body.changeBy);
res.write(JSON.stringify(vote));
res.end();
console.log(vote);}

Second my index.js

代码语言:javascript
复制
router.post('/api/:id/upvote', siteController.upvote);
router.post('/api/:id/downvote', siteController.downvote);

一切都按预期运行,但使用此设置时,我循环中的按钮不能正常工作。只有第一个按钮将数字加/减1。

如何使用循环中的按钮解决问题?有什么灵感/想法来改进当前的设置吗?

EN

回答 1

Stack Overflow用户

发布于 2018-12-06 10:10:04

您需要以某种方式将id传递给onclick函数。一种方法是设置单击元素的id,如下所示:

代码语言:javascript
复制
each val in post['listitem']
    div.listitem
       .rating_button
         .buttons
           button(id= val.id class='up' aria-pressed="false") Upvote
           p#vote 0 //currently 0 later data from db
           button(id= val.id class='down' ariapressed="false")Downvote

然后,您可以通过在click函数中添加对元素的引用来捕获它:

代码语言:javascript
复制
$(document).on('click', '.up', function(element){

    var id = element.target.id;

    var up = $.post("/api/" + id + "/upvote", {changeBy: 1}, function(dataBack){
        $("#vote").text(dataBack);
    });
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53640353

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档