Несколько паров и переменных в одной функции наведения

Question

Я хотел бы иметь возможность вводить селектор 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(); 
     } 
    ); 

Я есть это, не могу понять, как иметь несколько переменных ...

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, чтобы получить мои соответствующие данные.