一个悬停函数中的多个悬停和变量

Question

我希望能够输入 CSS 选择器，为其指定标题和说明。基本上，它是一个帮助工具提示，因此当您将鼠标悬停在某处时，它会显示在侧边栏中。

我怎样才能简化这个？我可能有 50 个或更多这些，而且我的代码会超级冗余。我试过创建变量，但是，我卡在了悬停 class 上，因为它可以是任何东西。

它们都做同样的事情，只是不同的标题、描述和选择器 class。

    $('.class1').hover(
      function () {
          $('.my-why').hide();
          $('.sidebar').append('<div class="helpertip">' +
          '<h5><a style="color:#fff;">Title #1</a></h5>' +
          '<p id="myWhy">Description #1</p>' +
          '</div>');

      }, function () {
          $('.my-why').show();
          $('.helpertip').remove();
      }
    );

    $('.class2').hover(
      function () {
          $('.my-why').hide();
          $('.sidebar').append('<div class="helpertip">' +
          '<h5><a style="color:#fff;">Title #2</a></h5>' +
          '<p id="myWhy">Description #2</p>' +
          '</div>');

      }, function () {
          $('.my-why').show();
          $('.helpertip').remove();
      }
    );

    $('.class3').hover(
      function () {
          $('.my-why').hide();
          $('.sidebar').append('<div class="helpertip">' +
          '<h5><a style="color:#fff;">Title #3</a></h5>' +
          '<p id="myWhy">Description #3</p>' +
          '</div>');

      }, function () {
          $('.my-why').show();
          $('.helpertip').remove();
      }
    );

我确实有这个，不知道如何拥有多个变量...

var hclass = 
var htitle =
var hdescription = 

$(hclass).hover(
      function () {
          $('.my-why').hide();
          $('.sidebar').append('<div class="helpertip">' +
          '<h5><a style="color:#fff;">' + htitle + '</a></h5>' +
          '<p id="myWhy">' + hdescription + '</p>' +
          '</div>');

      }, function () {
          $('.my-why').show();
          $('.helpertip').remove();
      }
    );

Answer 1

那么如何在包含元素上使用数据属性呢？如果它们有 data-title 和 data-description，包含所有相关信息，那么您可以为所有这些信息使用一个这样的函数：

$("div.classes").hover(function () {
  var myTitle = $(this).data("title");
  var myDescription = $(this).data("description");

      $('.my-why').hide();
      $('.sidebar').append('<div class="helpertip">' +
      '<h5><a style="color:#fff;">'+myTitle+'</a></h5>' +
      '<p id="myWhy">'+myDescription'+</p>' +
      '</div>');

  }, function () {
      $('.my-why').show();
      $('.helpertip').remove();
  }
);

当然，您必须为所有相关元素提供方便的选择器 class。

但是，如果像您所说的那样，您希望避免在 HTML 中塞满不必要的杂物（为什么不呢？最好让代码与视图分开），请考虑这个:

var myCollection = [{
  name: 'class1',
  title: 'Title 1',
  description: 'Lorem Ipsum'
}, {
  name: 'class2',
  title: 'Title 2',
  description: 'Dolor Sit Amet'
}, {
  name: 'class3',
  title: 'Title 3',
  description: 'Vivamus magna justo'
}, {
  name: 'class4',
  title: 'Title 4',
  description: 'Your preferred random description here...'
}];
// I'm going to iterate over my collection of
// objects and simply create a hover for each  one.
$.each(myCollection, function(index, item){
  // this.class refers to the class variable in the current
  //  object of the iterated collection.
  $(this.class).hover(function () {    
    $('.my-why').hide();
    $('.sidebar').append('<div class="helpertip">' +
      '<h5><a style="color:#fff;">'+ this.title +'</a></h5>' +
      '<p id="myWhy">'+ this.description +'</p>' +
      '</div>');
    }, function () {
      $('.my-why').show();
      $('.helpertip').remove();
  });
})

有了这个，我创建了一个我可以迭代的集合，只需依次调用每个集合上的悬停。在 $.each() 中，我可以参考它来获取当前对象，并参考 this.title 或 this.description 来获取我的相关数据。

一个悬停函数中的多个悬停和变量

Multiple hovers and variables in one hover function

javascript

variables

hover

jquery-hover