大佬教程收集整理的这篇文章主要介绍了如何使我的jQuery代码更高效？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
$(window).load(function () { $('#submission1').keyup(function() { var len = this.value.length; if (len >=1500) { this.value = this.value.subString(0,1500); } $('#countCharacters1').text(1500 - len); }); $('#submission2').keyup(function() { var len = this.value.length; if (len >=1500) { this.value = this.value.subString(0,1500); } $('#countCharacters2').text(1500 - len); }); $('#submission3').keyup(function() { var len = this.value.length; if (len >=1500) { this.value = this.value.subString(0,1500); } $('#countCharacters3').text(1500 - len); }); $('#submission4').keyup(function() { var len = this.value.length; if (len >=1500) { this.value = this.value.subString(0,1500); } $('#countCharacters4').text(1500 - len); }); });
它们工作正常,但是反正是为了使它们更有效率？
干杯.
$(window).load(function () { $('#submission1,#submission2,#submission3,#submission4').keyup(function() { var len = $(this).val().length; if (len > 1500) { $(this).val($(this).val().subString(0,1500)); } $('#countCharacters' + $(this).attr('id').slice(-1)).text(1500 - len); }).keyup(); });
如果你的textareas中有一个共同的类,它可以简化得更多,我们可以避免你在结尾处的id操作给我们更多关于HTML布局的细节 – 特别是#countCharacters元素在DOM中的位置相对于textareas.
$(window).load(function () { $('.editors').keyup(function() { var len = $(this).val().length; if (len > 1500) { $(this).val($(this).val().subString(0,1500)); } $(this).next('.count').text(1500 - len); }).keyup(); });
这要求您的textareas具有编辑器类,并且count元素具有count类并且紧接在它们各自的textareas之后定位.无论计数元素实际位于何处,都可以设计类似的解决方案.
更新
基于此HTML,您在评论中包含：
<div class="field">
<textarea name="submission1" class="editors" id="submission1" style="width: 680px"><?=$writtenSubmission1;?></textarea>
</div>
<p align="right">
<span id="countCharacters1" class="count" style="font-weight:bold">1500</span>
characters left
</p>
text()行需要更改为：
$(this).closest('.field').next().find('.count').text(1500 - len);
基本上,你只是遍历DOM树,从textarea元素$(this)到正确的.count元素.有关可用于帮助您在DOM中移动的函数的详细信息,请参阅the jQuery docs.
我还在上面做了一个小改动,在将事件处理程序绑定到它之后立即触发keyup()函数,以便在页面加载后立即显示正确的计数.
您可以在这个小提琴中看到HTML的工作版本：http://jsfiddle.net/tXArh/
以上是大佬教程为你收集整理的如何使我的jQuery代码更高效？全部内容，希望文章能够帮你解决如何使我的jQuery代码更高效？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。