从javascript循环中的函数中检索变量

Retrieve a variable out of a function in a javascript loop

本文关键字：检索 变量 函数 循环 javascript      更新时间：2023-09-26

我在使用以下脚本时遇到问题：当用户点击上传按钮并选择一些图像时，它会创建divs并为每个图像添加一个。

但是，我无法从tba变量的函数中检索到它。我知道这个问题已经被问过好几次了，我尝试了很多不同的方法（包括函数中的reader.onload…），但我没有成功地检索到那个变量。

<script type="text/javascript">
 $(document).ready(function() {
     function readURL(input) {      
        if (input.files) {
            var tba = '';
            for (var i = 0; i < input.files.length; i++) {
                if(input.files[i]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                            tba += '<div class="gallery_image"><img src="'+e.target.result+'" alt="Image currently not accessible" /></div>';
                    };
                    reader.readAsDataURL(input.files[i]);
                }
            }
            $('#gallery_container').html(tba);
        }
    } 
 });
</script>

非常感谢你的帮助，祝你今天愉快。

变量tba刚好在您的函数范围内可用。若要访问此函数之外的tba，请将声明也移到它之外。

  // global
     var tba = '';
     $(document).ready(function() { 
         function readURL(input) {      
            if (input.files) {
                tba = '';

编辑：

由于我回答的第一部分没有提供所需的帮助，那么删除tba并直接进行DOM操作怎么样？

你的功能应该是这样的：

<script type="text/javascript">
 $(document).ready(function() {
     function readURL(input) {      
        if (input.files) {
            $('#gallery_container').html(''); //clear the container
            for (var i = 0; i < input.files.length; i++) {
                if(input.files[i]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        // append your generated HTML directly
                        $('#gallery_container').append('<div class="gallery_image"><img src="'+e.target.result+'" alt="Image currently not accessible" /></div>');
                    };
                    reader.readAsDataURL(input.files[i]);
                }
            }
            // removed the dom manipulating part here
        }
    } 
 });
</script>

如果在函数外定义变量，它将从函数中获取值。这被称为全局范围，否则它只能在函数范围内使用。

检查此项：

var a = 30;
function foo() {
    a = 25;
}
foo();
alert(a); // will give 25

点击此处查看实时

所以你的代码应该看起来像：

<script type="text/javascript">
 $(document).ready(function() {
     var tba = '';
     function readURL(input) {      
        if (input.files) {
            for (var i = 0; i < input.files.length; i++) {
                if(input.files[i]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                            tba += '<div class="gallery_image"><img src="'+e.target.result+'" alt="Image currently not accessible" /></div>';
                    };
                    reader.readAsDataURL(input.files[i]);
                }
            }
            $('#gallery_container').html(tba);
        }
    } 
 });
</script>
相关文章：