使用 jQuery 和 Javascript 初始化多个 html 元素

Initialize more than one html element using jQuery and Javascript

本文关键字：html 元素 初始化 jQuery Javascript 使用      更新时间：2023-09-26

我试图引导我的html元素触发我自定义的JS文件的方法。

第三个文本区域看起来很好。

第一个和第二个文本区域不会影响我尝试在 myJSFile.js 文件中更改的任何设置。

这是我的问题：js文件很好地加载了最后一个文本区域，但无法使用我的js方法正确初始化以前的文本区域。

我的JS文件做错了，如果您帮助我，我将不胜感激。

PS ：启动一些插件并在 CKEditor 上工作。

这是我的 HTML 文件： 

<textarea id="myTextAreaID" name="myTextArea"></textarea>
<script type="text/javascript" src="../public/js/myJSFile.js"onload="setTextAreaValues('myTextAreaID')"></script>
<textarea id="myTextAreaID2" name="myTextArea2"></textarea>
<script type="text/javascript" src="../public/js/myJSFile.js"onload="setTextAreaValues('myTextAreaID2')"></script>
<textarea id="myTextAreaID3" name="myTextArea3"></textarea>
<script type="text/javascript" src="../public/js/myJSFile.js"onload="setTextAreaValues('myTextAreaID3')"></script>

这是 myJSFile.js 文件

var textAreaID;
$(function(){
   var myTextArea = $('#'+textAreaID);
   //something is being loaded here, and it is loaded fine.
});
function setTextAreaParameters(param){
    textAreaID = param;
}

提前谢谢。

这样做不是个好主意，但是理解为什么会发生这种情况很有趣。在下面的代码中，您将定义全局变量textAreaID：

var textAreaID;
$(function() {
    var myTextArea = $('#' + textAreaID);
    //something is being loaded here, and it is loaded fine.
});
function setTextAreaParameters(param) {
    textAreaID = param;
}

此脚本在文档中注入三次。在最后一个script标签之后，textAreaID变量的值将被myTextAreaID3，因为它是全局的，最后一个setTextAreaParameters调用将覆盖上一个。请记住，脚本在您的情况下是同步加载的（没有异步或延迟属性），这意味着onload回调不会等待并立即将textAreaID设置为新值。

但是DOMContentLoaded事件尚未触发。这是您使用此代码订阅的事件：

$(function() {
    // DOMContentLoaded
});

当它最终发生时 - 只会处理第三个文本区域 - ID 为 myTextAreaID3 的文本区域。

更好的方法是只有一个脚本标签，并将文本区域设置为相同的类名属性：

<textarea id="myTextAreaID2" name="myTextArea2" class="editor"></textarea>

然后在脚本中可能有某种映射，其中包含每个单独文本区域的配置参数。

您包含相同的脚本三次，但浏览器可能足够智能，只能加载一次（没有理由在同一页面上多次加载相同的脚本）。

你需要做的是只包含一次脚本，比如在 body 标签的末尾之前 

...
<script type="text/javascript" src="../public/js/myJSFile.js"></script>
</body>

然后在 JS 文件中，等待文档加载，并相应地处理所有文本区域：

$(function() {
 $('textarea').each(function(i, j) {
 console.log('do something for the ' + i + 'th text area');
});
})
相关文章：