流星应用程序中的按钮位置错误

Button in wrong place in meteor app

本文关键字:位置 错误 按钮 应用程序 流星      更新时间:2023-09-26

我做了一个小应用程序,我的按钮只显示在一个地方。这一切都在起作用,但在错误的地方。请参阅图片。我会留下我的GitHub回购链接。抱歉,大部分内容都是西里尔字母,但代码当然是英文拉丁字母。

这是我的问题的视频(22秒)

谢谢你的帮助。

您的问题是id。HTML id是唯一的,所以当您执行document.getElementById('skocko')时,您只会返回具有该id的第一个元素。

相反,给按钮一个skocko类,并像这样访问它:

Template.myTemplate.events({
    "click .glasaj":function(event, template){
      template.$(".skocko").toggle();
    }
}

这将选择当前模板中类别为skocko的元素。

SRC:https://stackoverflow.com/a/27116956/2317712

检查div定位如何使用jQuery相对于另一个元素定位一个元素?所以它的位置可以相对于点击的按钮,或者为每个skoko分配唯一的skoko id。。

在脚本glasaj.js 中执行类似操作

     if (Meteor.isClient) {
Template.glasajDugme.events({
      'click .glasaj': function(){        
          var g = Meteor.user().profile.неискоришћениГласови;
          if (g < 1) {

              var pos = $(this).position();
              // .outerWidth() takes into account border and padding.
              var width = $(this).outerWidth();
              //show the menu directly over the placeholder
              $("#skocko").css({
                  position: "absolute",
                  top: pos.top + "px",
                  left: (pos.left + width) + "px"
              }).show();
              document.getElementById('skocko').style.display = "inline-flex";
           // return "disabled" ;
          } 
          else {
            Predlozi.update(this._id, {$inc: {Број_Гласова: 1}}
            );
            Meteor.users.update(Meteor.userId(), {$inc: {"profile.неискоришћениГласови": -1}}
            );              
          };
      }      
 });
sakrijskocka = function(){
     document.getElementById('skocko').style.display = "none";
   }; 
 };