Один обработчик для всех

[ninzzo]

Привет!

Обычно пишу:

<script type="text/javascript">
jQuery(document).ready(function() {


		$("#various1").fancybox({
				'width'				: '75%',
		});

		$("#various2").fancybox({
				'width'				: '75%',
	        });

               $("#various3").fancybox({
				'width'				: '75%',
	        });

                и так для каждого ID. ИХ 200 например...

                  $("#various200").fancybox({
				'width'				: '75%',
	        });

 });
</script>

Вручную я 200 обработчиков не пишу. просто через цикл PHP вывожу от 1-200.

нижу идет:

<a id="various1" href="#" >Действие</a>
<a id="various2" href="#" >Действие</a>
<a id="various3" href="#" >Действие</a>
<a id="various4" href="#" >Действие</a>
<a id="various5" href="#" >Действие</a>
<a id="various6" href="#" >Действие</a>
<a id="various7" href="#" >Действие</a>
...
<a id="various200" href="#" >Действие</a>

Вопрос:

можно как то вместо всех обработчиков написать только ОДИН ?
и использовать там что то типа THIS ????

ID заменить на CLASS не проблема. Просто надоело уже загромождать.


На примере:
я из базы вывожу список товаров. И около каждого товара есть кнопка что вызовет модальное окно. Вот я хочу написать один обработчик и что бы все они вызывали это окно только со своими данными. Как то так.


Спасибо за ответы!

[ksa]

можно как то вместо всех обработчиков написать только ОДИН ?

Дай всем элементам некий класс... Далее работай с этим классом.

[Vlasenko Fedor]

Vanilla

<div id="test">
      <a id="various1" href="#">Действие</a>
      <a id="various2" href="#">Действие</a>
      <a id="various3" href="#">Действие</a>
      <a id="various4" href="#">Действие</a>
      <a id="various5" href="#">Действие</a>
      <a id="various6" href="#">Действие</a>
      <a id="various7" href="#">Действие</a>...
      <a id="various200" href="#">Действие</a>
      <a  href="#">Действия нет</a>
    </div>
    <script>
      test.onclick = function (e) {
        e = e || window.event;
        target = e.target || e.srcElement;
        if (!(target.tagName == "A" && target.id.slice(0, 7) == "various")) return;
        alert(target.id);
      }
    </script>

jQuery

<div id="test">
      <a id="various1" href="#">Действие</a>
      <a id="various2" href="#">Действие</a>
      <a id="various3" href="#">Действие</a>
      <a id="various4" href="#">Действие</a>
      <a id="various5" href="#">Действие</a>
      <a id="various6" href="#">Действие</a>
      <a id="various7" href="#">Действие</a>...
      <a id="various200" href="#">Действие</a>
      <a href="#">Действия нет</a>
    </div>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <script>
      jQuery(function ($) {
        $('#test').on('click', 'a[id^=various]', function () {
          alert(this.id);
        });
      });
    </script>

[kostyanet]

И около каждого товара есть кнопка что вызовет модальное окно

Кнопка "Купить", не иначе.

Так не бывает. "Товар" в вашей терминологии имеет структуру и в ней та самая кнопочка. Ссылку все равно генерить надо, тег, а развесить на определенный массив тегов функции легче простого по имени. Потому что массивы имен обычно и передаются на сервер массивами.

[kostyanet]

Или по типу ноды или что самоочевидно по id родительского контейнера.