Как я могу назначить обработчики кликов JQuery через итерацию?

Question

У меня есть этот код, который можно увидеть Here. Идея заключалась бы в том, что у меня мог бы быть список элементов, который я мог бы затем назначить обработчику для запуска любого повторяющегося кода, который мне нужно будет запускать (например, функция, которая модифицирует серию классов). Идея состоит в том, что я мог перебирать список идентификаторов и назначать обработчик, однако из-за моего ограниченного знания Javascript он не работает. Кто-нибудь сможет помочь?

Кодекс интересов:

HTML:

<a href="#" id="first">First</a><br> 
<a href="#" id="second">Second</a><br> 
<a href="#" id="third">Third</a><br> 
<a href="#" id="forth">Forth</a><br> 

Javascript:

//Choose which ids I want to iterate 
ids = ['#first', '#second', '#third', 'forth'] 

//For all the ids there are 
for (i=0; i<ids.length; i++) { 

    //Select an item 
    item = ids[i] 

    //Add a click handler to that item 
    $(item).click(function() { 

      //Run a function that involves knowing the item I have iterated... 
      alert("Handler for "+ item + " called."); 
    }); 
} 

Спасибо,
Aj.

Answer 1

Это не будет работать должным образом, потому что вы назначаете глобальный элемент. Поскольку у javascript есть только глобальные и локальные функции, говорящие:

var item = ids[ i ]; 

не будет работать. Вы можете JQuery в каждый метод итерации над массивом:

$.each(ids, function(index, value) { 
    $(value).click(function() { }); 
}); 

или обернуть элемент в функцию таким образом:

for(i=0; i<ids.length; i++) { 
    (function(value) { 
    $(value).click(function() { }); 
    })(ids[i]) 
} 

вы также можете просто сделать это

$(ids.join(',')).click(function(e) { 
    // No variable "item" available here 
    // access the target element by $(this) or $(e.target) 
}); 

Answer 2

Вот фрагмент с минимальными изменениями, необходимыми для устранения двух проблем.

• Проблема № 1: Пропал # перед forth в ids массиве.

• Проблема №2: Необходимо использовать this вместо item в обработчике кликов.

//Choose which ids I want to iterate 
 
ids = ['#first', '#second', '#third', '#forth'] 
 

 
//For all the ids there are 
 
for (i=0; i<ids.length; i++) { 
 

 
    //Select an item 
 
    item = ids[i] 
 

 
    //Add a click handler to that item 
 
    $(item).click(function() { 
 

 
      //Run a function that involves knowing the item I have iterated... 
 
      alert("Handler for "+ this.id + " called."); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="first">First</a><br> 
 
<a href="#" id="second">Second</a><br> 
 
<a href="#" id="third">Third</a><br> 
 
<a href="#" id="forth">Forth</a><br>