Question

我有3个具有相同类别的元素：.tip-container

我想在mouseenter上发射一个事件，但只能在悬停的元素中发射。

我有这个HTML：

<div class="personal_info_form">
  <div class="form-group">        
    <span class="information-sign"></span>
    <div class="tip-container hidden">
      <div class="tip">Phone: 7777777777</div>
    </div>    
  </div>
  <div class="form-group">        
    <span class="information-sign"></span>
    <div class="tip-container hidden">
      <div class="tip">Email: hola@hello.com</div>
    </div>    
  </div>
  <div class="form-group">        
    <span class="information-sign"></span>
    <div class="tip-container hidden">
      <div class="tip">Address: this is the address</div>
    </div>    
  </div>
</div>

我有这个js：

Drupal.behaviors.personalInfo = (function(){
    var _attach = function(context){
            $('.personal_info_form', context)
            //.once()
            .each(function(i, section){
                new PersonalInfo($(section));
            });
    };

    return {
            attach: _attach
    };
})();

function PersonalInfo($el){
    this.$el = $el;
    this.infoSign = this.$el.find('.information-sign');
    this.tipContainer = this.$el.find('.tip-container');
    this.toggleInfoSign();
    return this;
}

PersonalInfo.prototype.toggleInfoSign = function(){
    var THIS = this;
    $(THIS.infoSign).on({
        mouseenter: function () {
            THIS.tipContainer.removeClass('hidden');
        },
        mouseleave: function () {
            THIS.tipContainer.addClass('hidden');
        }
    });

    return THIS;
};

默认情况下隐藏提示容器，因此当您将span悬停在类information-sign上时，鼠标离开时应显示或隐藏tip-container div。目前，当您将鼠标悬停在任何.information-sign span上时，其他隐藏元素就会显示出来。

我该怎么办？

Answer 1

我认为CSS是更好的选择 - demo

这应该为您提供所需内容的基本概念：

.tip-container.hidden {
  display: none;
}
span.information-sign {
  position: relative;
}
span.information-sign:hover + .tip-container.hidden {
  display: block;
  position: absolute;
  left: 50px;
  border: 1px solid #000;
  width: 200px;
  height: 50px;
}

Answer 2

问题是，您并未在每个部分调用new PersonalInfo，而是只在整个表单上调用它。因此this.$el.find('.tip-container')会返回所有.tip-container个DIV，而不仅仅是一个。

Drupal.behaviors.personalInfo = (function(){
    var _attach = function(context){
            $('.personal_info_form .form-group', context)
            //.once()
            .each(function(i, section){
                new PersonalInfo($(section));
            });
    };

    return {
            attach: _attach
    };
})();

如何只在一个元素上触发事件？

2 个答案: