jQuery - 需要两个元素才能使用相同的jQuery函数，但具有不同的结果

我做了一些jQuery，它限制了文本字段中的字符数。它工作得很好，但任何优化都是受欢迎的。现在我的问题是，如果我想将其应用于多个文本字段，就会有冲突。冲突是，当任何文本字段中输入1个字符时，它会影响jQuery中指定的所有文本字段。jQuery - 需要两个元素才能使用相同的jQuery函数，但具有不同的结果

JS FIDDLE

jQuery的

function countChar(val) { 
     var allowed_length = 20; // character count limit here 
     var len = val.value.length; 
     if (len >= allowed_length) { 
      val.value = val.value.substring(0, allowed_length); 
      jQuery('.chars-twenty').text(0); 
     } else { 
      jQuery('.chars-twenty').text(allowed_length - len); 
     } 
    } 


    countChar(jQuery('#demo1').get(0)); 
    jQuery('#demo1').keyup(function() { 
     countChar(this); 
    }) 

    countChar(jQuery('#demo2').get(0)); 
      jQuery('#demo2').keyup(function() { 
     countChar(this); 
    })

我需要的特定textarea的字符数，以行动彼此完全独立。

非常感谢。

来源

2015-04-04 Delto

这不是真的干净，但你可以在上一个搜索类名（）元素：

function countChar(val) { 
     var allowed_length = 20; // character count limit here 
     var len = val.value.length; 
     if (len >= allowed_length) { 
      val.value = val.value.substring(0, allowed_length); 
      // Notice the change here: 
      jQuery(val).prev().find(".chars-twenty").text(0); 
     } else { 
      // And here. 
      jQuery(val).prev().find(".chars-twenty").text(allowed_length - len); 
     } 
    } 


    countChar(jQuery('#demo1').get(0)); 
    jQuery('#demo1').keyup(function() { 
     countChar(this); 
    }) 

    countChar(jQuery('#demo2').get(0)); 
    jQuery('#demo2').keyup(function() { 
     countChar(this); 
    })

下面是更新小提琴：http://jsfiddle.net/6vrhkkat/1/

编辑：这里是我会做什么相反，假设你能够改变HTML。将一个data属性添加到跨度以将其与特定textarea关联。这使您可以确定定位正确的跨度，即使您的DOM发生了变化。

<span class="chars-twenty" data-textarea="demo1">

，然后访问使用jQuery这样的正确跨度：

jQuery(".chars-twenty[data-textarea="+val.id+"]").text('...');

在另一小提琴一个例子：http://jsfiddle.net/6vrhkkat/2/

来源

2015-04-04 02:34:58 Jonathan

完美的乔纳森，这对我有用。 [也删除了一行代码。]（http://jsfiddle.net/6vrhkkat/3/）感谢您的帮助！编辑：我用你的第二个建议，万一你想知道。 – Delto 2015-04-04 02:54:35

根据什么浏览器，你需要支持，你也许可以简单地使用maxlength属性。它支持Chrome，IE 10+，Firefox 4+，Opera 15+和Safari。

<textarea rows="3" id="demo1" maxlength="20"></textarea>

来源

2015-04-04 02:35:49 Seamus

我希望它显示视觉字符计数表。 – Delto 2015-04-04 02:36:21

var maxLen = 20; // character count limit here 

function countChar(jqObj) { 
    var len = jqObj.val().length; 
    var diff = maxLen - len; 

    if (len > maxLen) { 
     len = maxLen; 
     diff = 0; 
    } 

    jqObj.val(jqObj.val().substr(0, len)).prev('p').find('span.chars-twenty').text(diff); 
} 

$(document).ready(function() { 
    $("[id*='demo']").keyup(function() { 
     countChar($(this)); 
    }).each(function() { 
     countChar($(this)); 
    }); 
});

Working fiddle分叉并从有机磷改性。

来源

2015-04-04 03:31:14

jQuery - 需要两个元素才能使用相同的jQuery函数，但具有不同的结果

回答

相关问题