javascript - 对调用 JQuery 自定义函数感到困惑

Question

我有这样的html

<span rel='comm' val='12'>click</span>
<span rel='comm' val='82'>click</span>

我正在使用 JQuery 来执行此操作

$('span[rel*=comm]').cust();

并且自定义功能就是这样

$.fn.cust = function () {

    $(this).click(function(e) {
        alert($(this).val());
    });
}

即使我单击第二个跨度，它的值也是 12，这应该给我 82

任何帮助，将不胜感激。

Answer 1

您需要为集合中的每个元素返回一个单独的函数，通常使用return this.each ...

$.fn.cust = function () {
   return this.each(function() {
      $(this).click(function(e){
          alert($(this).val());
       });
   });
}

并且value不是span元素的有效属性。

Answer 2

该调用为与选择器匹配的所有跨度$('span[rel*=comm]')返回一个JQuery 包装器 - 您在示例中拥有的两个都被选中。

现在在 , 的定义cust中指$(this)的是包装的数组，这会导致您的问题。利用

$(this).each( function() { 
     $(this).click (...
});

Inisdeeach $(this)将指向选择中的每个单独的 span 元素，因此它们将click单独附加处理程序并按预期工作。

Answer 3

您可以通过以下方式实现您正在寻找的东西：

HTML：

<span rel='comm' val='12'>click</span>
<span rel='comm' val='82'>click</span>

JS：

var cust = function(source) {
  alert($(source).attr('val'));
}

$('span[rel*=comm]').click(function(e) {
 cust(this);
});

JSFiddle 工作：http: //jsfiddle.net/ejquB/

Answer 4

这应该会更好：

$.fn.cust = function () {
    $(this).click(function (e) {
        alert($(this).attr('val'));
    });
}

span 没有价值。

http://jsfiddle.net/dREj6/

此外，如果您想让您的方法可链接，您应该返回一个 jQuery 实例：

$.fn.cust = function () {
    return $(this).click(function (e) {
        alert($(this).attr('val'));
    });
}

$('span[rel*=comm]').cust().css('color', 'red');

http://jsfiddle.net/dREj6/1/

Answer 5

• rel用于链接（锚元素） - 使用class
• 使用data属性而不是自定义属性

http://jsbin.com/ogenev/1/edit

<span class='comm' data-val='12'>click</span>
<span class='comm' data-val='82'>click</span>

$.fn.cust = function(){

   $(this).click(function(){
      alert(this.dataset.val);
   });

};


$('.comm').cust();

Answer 6

如果你使用它会起作用.attr('val')

$.fn.cust = function () {

    $(this).click(function(e){
      alert($(this).attr('val'));
    });
}
$('span[rel*=comm]').cust();

http://jsfiddle.net/fW7FT/

.val()是input因为他们是唯一接受官方val属性的人