Передача параметров в функцию при клике на ссылку (JQuery)?

Question

[G0rDi]

На чистом JavaScript это выглядит как то так:

&lt;sсript&gt;<br/>
function toFunction(m1, m2) {<br/>
 alert(m1 + ' - ' + m2);<br/>
}<br/>
&lt;/sсript&gt;<br/>
&lt;а href=&quot;javascript:toFunction(10,'text')&quot; &gt;Ссылка&lt;/а&gt;

А Вот как это сделать по правилам JQuery:

&lt;sсript&gt;<br/>
$(document).ready(function() {<br/>
 $(&quot;.urlparam&quot;).click(function () {<br/>
<br/>
alert(m1 + ' - ' + m2);<br/>
<br/>
});<br/>
});<br/>

<а href="#" class=«urlparam» >Ссылка</а>

Answer 1

[Serator]

Быть может имеет смысл использовать атрибут data-* из html5, вместо костылей на class / rel /etc., которые не предназначены для этого?

+ использование псевдо-протокола javascript: есть зло ;).

Answer 2

[homm]

С какого перепуга мой код нельзя использовать для нескольких ссылок, я не понял.
Раз:

function toFunction(){};
$(".urlparam1").click(function () { toFunction(10,'text'); });
$(".urlparam2").click(function () { toFunction(9,'text1'); });

Два:

function toFunction(){};
$(".urlparam1").click({num: 10, text: 'text'}, toFunction);
$(".urlparam2").click({num: 9, text: 'text1'}, toFunction);

Input внутри ссылки — это полнейшая жесть. Если сильно нужно хранить какие-то данные прямо в DOM-дереве, используем валидные атрибуты data:

<а href="#" class="urlparam" data-num="10" data-text="text"></a>
<а href="#" class="urlparam" data-num="9" data-text="text1"></a>

$(".urlparam").click(function () {
    var num = $(this).data('num');
    var text = $(this).data('text');
});

Comments

[Влад Фролов]

Про data не знал, спасибо.
На счёт «С какого перепуга мой код нельзя использовать для нескольких ссылок, я не понял.» — получается так, что для добавления 1 ссылки нужно добавить 1 строку в JS… ИМХО неудобно.

[homm]

Бывает, что данные удобнее хранить в js-коде, когда .urlparam1 и .urlparam2 это группы по 10 ссылок с одинаковыми свойствами, а бывает что непосредственно в ДОМе, тогда data.

[Влад Фролов]

Хмм, согласен.

[pxx]

А что за data-num="10" data-text="text"? W3c validator в доктайпе XHTML 1.0 Strict не знает про такие.

[Mithgol]

Используйте XHTML5.

Answer 3

[homm]

Во первых вы можете использовать eventData (см. api.jquery.com/click/).
Во вторых вы все еще можете написать:

$(".urlparam").click(function () {
    toFunction(10,'text');
});

Comments

[Влад Фролов]

Я так понял ему нужно реализовать вот такое:
<а href=«javascript:toFunction(10,'text')» >Ссылка</а>
<а href=«javascript:toFunction(9,'text1')» >Ссылка</а>
Ваш код не поможет такое сделать.

Answer 4

[Влад Фролов]

Интересный вопрос. Если мне нужен один параметр, то я пользуюсь атрибутом href="#". Если несколько параметров:
<а href="#" class="urlparam">
Ссылка
<input type="hidden" name="param1" value="1">
<input type="hidden" name="param2" value="2">
</а>

$(".urlparam").click(function () {
var param1 = $(self).find('param1').val();
});


PS А ещё я пользуюсь rel вместо class.

Comments

[Влад Фролов]

Не обратил внимание на то, что парсер съел важную деталь:
«Если мне нужен один параметр, то я пользуюсь атрибутом href="#value"»

Answer 5

[seagull]

$('.urlparam').each(function(index) {
    $(this).click({num: (index+1), text: $(this).value()},toFunction);
  });

Comments

[casey]

Прекрасное решение, не знал!

[seagull]

У меня даже работало так.

$('.urlparam').each(function(index) {
    $(this).click(function(){
       alert(index+$(this).value());
    });
});

Answer 6

[nikitammf]

Мне нравиться вот этот способ.