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());
    });
}

即使我点击第二个跨度应该给我82

，这个值也是12

任何帮助都将不胜感激。

Answer 1

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

完成

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

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

Answer 2

这应该更好：

$.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 3

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 4

如果您使用.attr('val')

，则有效

$.fn.cust = function () {

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

http://jsfiddle.net/fW7FT/

.val()适用于input，因为他们是唯一接受val属性官方

的人

Answer 5

对于与选择器匹配的所有范围，调用$('span[rel*=comm]')会返回 JQuery包装 - 您的示例中的两个选择都会被选中。

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

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

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

Answer 6

您可以通过以下方式实现您的目标：

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/

混淆了调用JQuery自定义函数

6 个答案: