如何为流星中嵌套的每个元素编写鼠标输入事件？

Question

我想在鼠标进入时使用弹出窗口显示 class="ui fluid popup left transition hidden" 里面的内容。 这是根据特定的项目和发布和工作从数据库中获取的。

我的问题是鼠标进入和退出事件仅适用于一个框。这是因为嵌套每个内部的元素，id 分配给第一个盒子并不是所有的。这个怎么解决 wandisco and cloudera are platform and sp1, sp2 are releases, CEI,CQI are projects, and tabs with green,red yellow are jobs

status.html

  <div class="example tabClick">
    <div class="ui two item inverted small menu" style="margin:0 0.5%">
        <a class="item active sbtn1" data-tab="wan"><h4>Wandisco</h4></a>
        <a class="item sbtn2" data-tab="second"><h4>Cloudera</h4></a>
    </div>
    <div class="ui small tab active" data-tab="wan" id="Outer">
        <div class="ui top attached blue tiny tabular menu">
            {{#each listRelease}}
                <a class="item" data-tab="wan/{{this.release}}"><h4>{{this.release}}</h4></a>
            {{/each}}
        </div>
        {{#each listRelease}}  
            <div class="ui bottom attached tab menu" data-tab="wan/{{this.release}}" id="rel">
                <div class="ui menu grids" style="margin-top:0;">
                    {{#each listProjName this.release}}
                        <div class=" column equal width aligned padded center aligned">
                            <div class="ui vertical allifluid  menu"><center><p><h4>{{this.project}}</h4></p></center>
                                {{#each listjobName this.release this.project}}
                                    <div class="ui small menu" style="background-color:{{getStatusColor buildStatus}}; padding-top: 5px; padding-right: 3px; padding-bottom: 5px; padding-left: 8px;" id="jbox">
                                        <p id="viewJob"><h5>{{job}}</h5></p>
                                        <div class="ui fluid popup left transition hidden">
                                            <div class="ui column relaxed grid">
                                                <a class="item">Last Build: {{lastBuild}}</a>
                                                <a class="item">Last Successful Build: {{lastSuccess}}</a>
                                                <a class="item">Duration: {{lastDuration}}</a>
                                                <a class="item">Robo Results: {{robotResult}}</a>
                                            </div>
                                        </div>
                                    </div>
                                {{/each}}
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        {{/each}}
    </div>
</div>

我的鼠标进入和离开事件如下。 status.js

Template.status.events({
'mouseenter #jbox'(event, instance ) {
    console.log("mouse enter"); 
          $(".popup").show();

  },
  'mouseleave #jbox'(event, instance) {
  console.log("mouse exit");
  $(".popup").hide();
  },

});

Answer 1

Jankapunkt 走在正确的轨道上，但您需要定位 .popup，它是鼠标下元素的子元素：

Template.status.events({
  'mouseenter .jbox'(event, instance ) {
    console.log("mouse enter"); 
    $(event.currentTarget).children('.popup').show();
  },
  'mouseleave .jbox'(event, instance) {
    console.log("mouse exit");
    $(event.currentTarget).children('.popup').hide();
  },
});

Answer 2

您通过 id 定义 jbox，该 id 用于出现一次的元素。但是，在您的 #each 内部，此元素会出现很多次，因此取消引用的 id 在这里不是一个好的解决方案。

那么你最好使用class 属性：

<div class="jbox ui small menu" style="background-color:{{getStatusColor buildStatus}}; padding-top: 5px; padding-right: 3px; padding-bottom: 5px; padding-left: 8px;">

您还需要将事件选择器签名从使用 #（取消引用 id）更改为 .（取消引用类）。

Template.status.events({
  'mouseenter .jbox'(event, instance ) {
    console.log("mouse enter"); 
    $(".popup").show();
  },
  'mouseleave .jbox'(event, instance) {
    console.log("mouse exit");
    $(".popup").hide();
  },
});