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

那么如何在包含元素上使用数据属性呢？如果他们有数据标题和数据描述，包含所有相关信息，那么你可以为所有人提供这样的单一功能：

$("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（以及为什么不能这样做？最好让代码与视图分开），请考虑以下事项：< / p>

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来获取我的相关数据。

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

1 个答案: