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

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

您通过 id 定义 jbox，它适用于出现一次的元素。但是，在您的 #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();
  },
});

Answer 2

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

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

How to write mouse enter event for nested each elements in meteor?

html

jquery

meteor