Как повторно использовать функцию?

Question

Я нашел код для создания простых вкладок. Он работает для каждого (одного) экземпляра класса. Но что, если у меня есть 2 разных класса, и мне нужно, чтобы они делали то же самое для обоих классов?

Я в настоящее время дублирую функцию. Я знаю, это бьет цель построения функции. Следовательно, вопрос новичков: как мне повторно использовать код функции для нескольких классов.

Спасибо!

$('.class1').each(function(){ 
    // code for making tabs work 
    // 
}); 


$('.class2').each(function(){ 
    // code for making tabs work 
    // 
}); 

Answer 1

Вы можете объявить функцию, которая делает ваши вкладки работают в других местах, например, что:

function makeTabsWork() 
{ 
    // code for making tabs work 
} 

, а затем назначить эту функцию для отдельных классов, например, так:

$('.class1').each(makeTabsWork); 

$('.class2').each(makeTabsWork); 

A более эффективным способом сделать это, однако, является следующее:

$('.class1, .class2').each(makeTabsWork); 

Однако, поскольку у вас есть два разных экземпляров класса, которые вы хотите, чтобы активировать с помощью JavaScript, вы можете просто присвоить общий признак, например:

<div class="class1" rel="nav"> 

и

<div class="class2" rel="nav"> 

и только вызовите функцию один раз так:

$('div[rel=nav]').each(makeTabsWork); 

Answer 2

Вы можете определить функцию в начале вашего JavaScript следующим образом:

<script type="text/javascript> 
    function foo() { 
    } 
</script> 

А позже вы можете назвать это как:

$(".class1").each(foo); 

Это только один из МНОГИХ подходов, хотя. Я настоятельно рекомендую прочитать больше об основном синтаксисе Javascript, чтобы найти другие способы решения вашей проблемы!

Один учебник, который может помочь is here. Если у кого-то еще есть предложения по учебникам, не стесняйтесь редактировать мой ответ или предлагать их в комментариях!

Различные подходы

// define a global function 
function globalFoo() { }; 

// Define a global function as a variable: 
var globalFooVar = function() { }; 

// or in run: 
$(function() { 
    // define your function inside of run (scoped definition) 
    function scopedFoo() { }; 

    // or a scoped variable 
    var scopedFooVar = function() { }; 


    // but no matter how you define it you basically use it the same way: 
    $("selector").each(globalFoo); 
    $("selector").each(globalFooVar); 
    $("selector").each(scopedFoo); 
    $("selector").each(scopedFooVar); 
});