一个悬停功能中的多个悬停和变量

Question

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

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

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

    $('.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();
  }
);

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

但是，如您所说，如果您希望避免在 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 来获取当前对象，以及 this.title 或 this.description 来获取我的相关数据。