複数のホバーと1つのホバー機能の変数

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を詰め避けることを好むだろう、あれば、これを検討（と、なぜあなたはないだろうより良いコードをビューから分離することができるように？）：

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を使用して関連するデータを取得することができます。