Upvote функциональность downvote в узле JS - PullRequest
Новая
       6

Upvote функциональность downvote в узле JS

0 голосов
/ 05 декабря 2018

У меня проблемы с поиском хорошего способа реализации функциональности upvote / downvote с помощью Pug (jade) на внешнем интерфейсе и экспресс-бэкенда.Моя текущая настройка выглядит следующим образом.Я зацикливаю элементы в моей базе данных mongo для отображения рейтинговых элементов. 

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 

$(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

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);}

Второй мой index.js 

router.post('/api/:id/upvote', siteController.upvote);
router.post('/api/:id/downvote', siteController.downvote);

Все работает как положено, но при этой настройке кнопки в моем цикле не работают должным образом.Только первая кнопка увеличивает / уменьшает число на 1.

Как мне решить проблему с кнопками в цикле?И есть ли идеи / идеи по улучшению текущей настройки?

1 Ответ

0 голосов
/ 06 декабря 2018

Вам нужно как-то передать идентификатор в функцию onclick.Один из способов сделать это - установить идентификатор щелкающего элемента следующим образом: 

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

Затем вы фиксируете это, добавляя ссылку на элемент в функции щелчка: 

$(document).on('click', '.up', function(element){

    var id = element.target.id;

    var up = $.post("/api/" + id + "/upvote", {changeBy: 1}, function(dataBack){
        $("#vote").text(dataBack);
    });
});
...