Javascript Template.foo.rendered应用于所有'；foo'；

我正在做一个有投票权的论坛

如果我进入一个职位，它会像这样

• 邮报
  • 答复
  • 答复
  • 答复
  • 等等

单击upvote和downvote、undownvote和UnNote时，我有调用meteor.methods的方法。它将用户插入到下行投票人、上行投票人、inc或inc-1投票人等

然后，我有下面的代码来禁用相反的按钮，如果点击

例如，单击“向上投票”时，将禁用“向下投票”。单击“向下投票”时，将禁用“向上投票”

模板.answerItem.rendered

Template.answerItem.rendered = function() {
    if( $('#upvote').hasClass('unvote') ) {
        $('#downvote').attr('disabled', 'disabled');
    }

    if( $('#downvote').hasClass('undownvote')) {
        $('#upvote').attr('disabled', 'disabled');
    }
}

Template.answerItem.rendered = function() {
    var $downvote = this.$('.downvote');
    var $upvote = this.$('.upvote');

    if($upvote.hasClass('unvote'))
        $downvote.attr('disabled', 'disabled');

    if($downvote.hasClass('undownvote'))
        $upvote.attr('disabled', 'disabled');
}

问题是，如果我在一个线程中有多个答案，这将应用于所有答案项，而不仅仅是应用于一个答案项

例如，如果我在

answer1

中单击

upvote

，

downvote

将在

answer1

和

answer2

中禁用

答案如下所示

线程内（post）

如何使我的代码只适用于（一）个应答项，以便它对每个

answerItem

分别起作用

EDIT1 更新信息（代码） Template.answerItem的HTML投票片段

<div class = "voting-container">
    <button id="upvote" class="upvote {{upvotedClass}}">
        <span class="glyphicon glyphicon-triangle-top"></span>
    </button>

    <div class = "voteCount-container"> 
        <span>{{votes}}</span>  <!--To retrieve votecount from answers collection-->
    </div>

   <button id="downvote" class="downvote {{downvotedClass}}">
        <span class="glyphicon glyphicon-triangle-bottom"></span>
    </button>               
</div>

模板.answerItem.helpers

Template.answerItem.helpers({

    upvotedClass: function() {
        var userId = Meteor.userId();
        if (userId && !_.include(this.upvoters, userId)) {
            return 'upvotable';
        }  else {
            return 'unvote';
        }    
    },
    downvotedClass: function() {
        var userId = Meteor.userId();
        if (userId && !_.include(this.downvoters, userId)) {
            return 'downvotable';
        } else {
            return 'undownvote';
        }
    }

});

Template.answerItem.events({


    'click .upvotable': function(e) {
    e.preventDefault();
    $('.downvotable').prop('disabled', true);
    Meteor.call('upvoteAnswer', this._id);
    },

    'click .unvote': function(e) {
    e.preventDefault();
    $('.downvotable').prop('disabled', false);
    Meteor.call('unvoteAnswer', this._id);
    },

    'click .downvotable': function(e) {
    e.preventDefault();
    $('.upvotable').prop('disabled', true);
    Meteor.call('downvoteAnswer', this._id);
    },

    'click .undownvote': function(e) {
    e.preventDefault();
    $('.upvotable').prop('disabled', false);
    Meteor.call('undownvoteAnswer', this._id);
    }

})

模板.应答项.事件

Template.answerItem.helpers({

    upvotedClass: function() {
        var userId = Meteor.userId();
        if (userId && !_.include(this.upvoters, userId)) {
            return 'upvotable';
        }  else {
            return 'unvote';
        }    
    },
    downvotedClass: function() {
        var userId = Meteor.userId();
        if (userId && !_.include(this.downvoters, userId)) {
            return 'downvotable';
        } else {
            return 'undownvote';
        }
    }

});

Template.answerItem.events({


    'click .upvotable': function(e) {
    e.preventDefault();
    $('.downvotable').prop('disabled', true);
    Meteor.call('upvoteAnswer', this._id);
    },

    'click .unvote': function(e) {
    e.preventDefault();
    $('.downvotable').prop('disabled', false);
    Meteor.call('unvoteAnswer', this._id);
    },

    'click .downvotable': function(e) {
    e.preventDefault();
    $('.upvotable').prop('disabled', true);
    Meteor.call('downvoteAnswer', this._id);
    },

    'click .undownvote': function(e) {
    e.preventDefault();
    $('.upvotable').prop('disabled', false);
    Meteor.call('undownvoteAnswer', this._id);
    }

})

---

您可以使用

this

，然后使用or获得相关的

。downvote

元素，前提是它们确实是兄弟。另外，用类替换您的ID

Template.answerItem.rendered = function() {
    if( $('.upvote').hasClass('unvote') ) {
        $(this).siblings('.downvote').attr('disabled', 'disabled');
    }

    if( $('.downvote').hasClass('undownvote')) {
        $(this).siblings('.upvote').attr('disabled', 'disabled');
    }
}

---

HTML要求您不要在页面上重复相同的id。因为每个

answerItem

都有一个

#upvote

，所以最终会同时渲染多个

第一步 将

upvote

和

downvote

ID替换为类

Template.answerItem.rendered = function() {
    if( $('.upvote').hasClass('unvote') ) {
        $(this).siblings('.downvote').attr('disabled', 'disabled');
    }

    if( $('.downvote').hasClass('undownvote')) {
        $(this).siblings('.upvote').attr('disabled', 'disabled');
    }
}

步骤2 您可以使用将jQuery选择器仅隔离到当前模板中的元素。从

呈现的

回调中，您可以使用

this.$

如下所示：

Template.answerItem.rendered = function() {
  var $downvote = this.$('.downvote');
  var $upvote = this.$('.upvote');

  if($upvote.hasClass('unvote'))
    $downvote.prop('disabled', true);

  if($downvote.hasClass('undownvote'))
    $upvote.prop('disabled', true);
}

---

还要注意的是，

.prop（'disabled'，true）

显然是最好的建议。

这是一个很好的建议。因为上面的答案是第一个，所以我无法检查你的答案。但是非常感谢你！我试过两种答案，但都不起作用。我更新了我的代码，如果有时间请看一下。非常感谢：）谢谢！我不知道我可以用hasClass来上课：）！很抱歉，我不得不取消勾选你的答案。我以为它在工作，但它没有。。。我已经更新了我的代码以进行更多的检查……是的，我不确定w/o是否真的运行了所有的代码。总的来说，我认为您在DOM中存储了太多的信息。如果您完全通过反应状态而不是经常使用jQuery（通常这表明您做错了事情）来操作类，那么解决方案会更容易。另外，您应该从按钮中删除ID，同样，您不能重复这些。我检查了我的代码，发现问题可能存在于

模板.answerItem.events

中。我尝试在

answerItem.events

中使用

this.$

。我得到了

未捕获类型错误：未定义不是函数

…为什么我不能使用

这个。$

在

'click.sth'：函数（e）{}

？它令人困惑-事件的上下文与渲染的上下文不同。事件可以有两个参数：事件对象和模板-您需要使用第二个参数。所以类似于

函数（e，t）{t.$（'.downvotable'）.prop（…）}

。