Question

我想在鼠标输入时使用弹出窗口显示class =“ui fluid popup left transition hidden”内的内容。这是基于特定项目和发布以及作业从db获取的。

我的问题是鼠标进入和退出事件仅适用于一个盒子。这是因为嵌套的内部元素，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，该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();
  },
});

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

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

2 个答案: