[英]jQuery - I'm having trouble looping through elements by class and executing a function each time
Here is my jsfiddle:这是我的jsfiddle:
https://jsfiddle.net/Lyt9o6b2/ https://jsfiddle.net/Lyt9o6b2/
HTML: HTML:
<textarea class="TextArea" id="TextArea1">Text in block 1</textarea>
<div class="PrintHelp" id="TextArea1PrintHelp"></div>
<br/><br/><br/><br/><br/>
<textarea class="TextArea" id="TextArea2">Text in block 2</textarea>
<div class="PrintHelp" id="TextArea2PrintHelp"></div>
jQuery: jQuery:
function copy_to_print_helper(TextAreaID, PrintHelpID){
$('#' + TextAreaID).text($('#' + PrintHelpID).val());
}
$('.TextArea').each(function(){
copy_to_print_helper(this, this + 'PrintHelp')
})
On PageLoad, I want to loop through all of my textarea elements of class 'TextArea' and then execute the copy_to_print_helper() function to copy that textarea's text into the corresponding div.在 PageLoad 上,我想遍历类“TextArea”的所有 textarea 元素,然后执行 copy_to_print_helper() 函数将该 textarea 的文本复制到相应的 div 中。 I have very little experience with jQuery but I'm guessing I'm not far off - any idea what I'm missing?
我对 jQuery 的经验很少,但我猜我离我不远了——知道我错过了什么吗?
The main issue is with your use of this
in the jQuery event handler.主要问题是您在 jQuery 事件处理程序中使用
this
。 That will hold a reference to the Element object.这将包含对 Element 对象的引用。 However in the
copy_to_print_helper
you expect this value to be a string which can be appended to the id
of the element to form a selector, which is not the case.但是,在
copy_to_print_helper
中,您希望此值是一个字符串,可以附加到元素的id
以形成选择器,但事实并非如此。 You would need to access the id
property of the object for that to work - but even then there's a better approach.您需要访问对象的
id
属性才能使其正常工作 - 但即使这样,也有更好的方法。
Use the this
reference of the object itself to get the properties of the textarea
, and also to find the related element in the DOM.使用对象本身的
this
引用来获取textarea
的属性,也可以在 DOM 中找到相关的元素。 This completely avoids the need for any incremental id
attributes which you dynamically target at runtime, making the HTML and JS code much more simple and reliable:这完全避免了您在运行时动态定位的任何增量
id
属性的需要,从而使 HTML 和 JS 代码更加简单和可靠:
function copy_to_print_helper(textarea) { $(textarea).next('.PrintHelp').text(textarea.value); } $('.TextArea').each(function() { copy_to_print_helper(this) })
.PrintHelp { margin-bottom: 50px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <textarea class="TextArea">Text in block 1</textarea> <div class="PrintHelp"></div> <textarea class="TextArea">Text in block 2</textarea> <div class="PrintHelp"></div>
Taking this a step further, the logic can be made more succinct by providing a function to text()
which returns the value to be displayed in each div
using an implicit loop over every element in the collection:更进一步,可以通过向
text()
提供一个函数来使逻辑更加简洁,该函数使用集合中每个元素的隐式循环返回要在每个div
中显示的值:
$('.print-help').text(function() { return $(this).prev('.textarea').val(); });
.print-help { margin-bottom: 50px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <textarea class="textarea">Text in block 1</textarea> <div class="print-help"></div> <textarea class="textarea">Text in block 2</textarea> <div class="print-help"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.