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

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

我如何简化这一点？我可能有50个或更多，我的代码将是超级冗余的。我已经尝试过创建变量，但是，由于它可以是任何东西，所以我一直停留在hover类上

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

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

$（'.class1'）。悬停(
函数（）{
$（'.my why'）.hide（）；
$（'.sidebar'）。追加（''+
“标题#1”+
“
说明#1
”+
'');
}，函数（）{
$（'.my why'）.show（）；
$（'.helpertip'）.remove（）；
}
);
$（'.class2'）。悬停(
函数（）{
$（'.my why'）.hide（）；
$（'.sidebar'）。追加（''+
“标题#2”+
“
说明#2”+
'');
}，函数（）{
$（'.my why'）.show（）；
$（'.helpertip'）.remove（）；
}
);
$（'.class3'）。悬停(
函数（）{
$（'.my why'）.hide（）；
$（'.sidebar'）。追加（''+
“标题#3”+
“
说明#3
”+
'');
}，函数（）{
$（'.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();
      }
    );

var hclass=
var htitle=
var HDDescription=
$（hclass）。悬停(
函数（）{
$（'.my why'）.hide（）；
$（'.sidebar'）。追加（''+
''+htitle+''的+
“
”+hdescription+”
”+
'');
}，函数（）{
$（'.my why'）.show（）；
$（'.helpertip'）.remove（）；
}
);

那么在包含元素上使用数据属性如何？如果它们有数据标题和数据描述，包含所有相关信息，那么您可以为所有它们提供一个这样的函数：

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

$（“div.classes”）.hover（函数（）{
var myTitle=$（此）.data（“title”）；
var myDescription=$（this）.data（“description”）；
$（'.my why'）.hide（）；
$（'.sidebar'）。追加（''+
''+myTitle+''的+
“
”+myDescription'+
”+
'');
}，函数（）{
$（'.my why'）.show（）；
$（'.helpertip'）.remove（）；
}
);

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

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

<>但是，如你所说，你宁愿避免用不必要的混乱填充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();
  });
})

var myCollection=[{
名称：'class1'，
标题：“标题1”，
描述：“Lorem Ipsum”
}, {
名称：'class2'，
标题：“标题2”，
描述：'Dolor Sit Amet'
}, {
名称：'class3'，
标题：“标题3”，
描述：“Vivamus magna justo”
}, {
名称：'class4'，
标题：“标题4”，
描述：'此处为您首选的随机描述…'
}];
//我将迭代我的
//对象，只需为每个对象创建一个悬停。
$.each（myCollection，函数（索引，项）{
//this.class是指当前
//迭代集合的对象。
$（this.class）.hover（函数（）{
$（'.my why'）.hide（）；
$（'.sidebar'）。追加（''+
''+这个.标题+''的+
“
”+this.description+”
'+
'');
}，函数（）{
$（'.my why'）.show（）；
$（'.helpertip'）.remove（）；
});
})

---

有了这个，我创建了一个可以迭代的集合，只需依次调用每个集合上的hover。在$.each（）中，我可以引用此来获取当前对象，而this.title或this.description可以获取相关数据。

谢谢，我将保留此作为第二个选项，但我更希望将其保留在一个位置，而不是将内容添加到HTML中。我已修改了代码。看看第二个选项，这可能更符合您的要求。通过将所有数据收集在一个集合中，我并没有创建一个庞大的变量集合。通过迭代该集合，我可以创建相同的行为。希望这有帮助！正是我要找的！很高兴这有帮助。