biến gia tăng sử dụng jquery

Question

Tôi cảm thấy như thế này là một điều khá cơ bản, nhưng tôi không thể tìm ra giải pháp. Tôi đang cố tăng giá trị sau khi tải IFRAME.

mã trông như thế này:

var x=0; 
$(document).ready(function() { 
     $('#iframe-2').load(function() { 
      var x=x+1;   
     }); 
     $('#iframe-3').load(function() { 
      var x=x+1;  
     }); 
     $('#iframe-4').load(function() { 
      var x=x+1;   
     }); 
     $('#iframe-5').load(function() { 
      var x=x+1;   
     }); 
    }); 

Những gì tôi muốn làm là cung cấp cho một số iframe tải bản cập nhật khi một iframe hoàn thành tải của nó. Mã đầu ra giống như sau:

<script language="javascript"> 
document.write(x + " Results"); 
</script> 

cảm ơn trước sự giúp đỡ của bạn!

Answer 1

tôi cuối cùng đã đưa ra một giải pháp rất đơn giản:

var x=0; 

    $(document).ready(function() { 

     $('#iframe-2').load(function() { 
      $("#t2").css("display","inline"); 
      x++; 
      document.getElementById("tabs-1").innerHTML=x + " Results"; 
     }); 

     $('#iframe-3').load(function() { 
      $("#t3").css("display","inline"); 
      x++; 
      document.getElementById("tabs-1").innerHTML=x + " Results"; 
     }); 

     $('#iframe-4').load(function() { 
      $("#t4").css("display","inline"); 
      x++; 
      document.getElementById("tabs-1").innerHTML=x + " Results"; 
     }); 
     $('#iframe-5').load(function() { 
      $("#t5").css("display","inline"); 
      x++; 
      document.getElementById("tabs-1").innerHTML=x + " Results"; 
     }); 
    }); 

Answer 2

Bạn nên thay đổi

var x=x+1; 

để

x=x+1 

Vì từ khóa var đang tạo ra một biến mới mỗi lần trong mỗi biến load nên toàn cầu x là không nhận được cập nhật/tăng lên.

Answer 3

Bạn khai báo biến cục bộ trong hàm gọi lại tải, vì vậy nó sẽ không tăng toàn cầu x, bạn có thể khai báo var x bên trong hàm gọi lại sẵn sàng của dom và sử dụng hàm đó trong hàm gọi lại tải.

$(document).ready(function() { 
    var x = 0; 
    $('#iframe-2').load(function() { 
     x++;   
    }); 
    $('#iframe-3').load(function() { 
     x++; 
    }); 
    $('#iframe-4').load(function() { 
     x++; 
    }); 
    $('#iframe-5').load(function() { 
     x++; 
    }); 
}); 

Edit: Sau này, document.write(x + " Results"); vẫn sẽ không làm việc, bởi vì nó thực thi trước khi iframe đã được tải. Bạn cần thực hiện kiểm tra không đồng bộ.

Đây là the live demo.

$(document).ready(function() { 
    var x = 0; 
    $('iframe').load(function() { 
     x++;   
    }); 
    var time_id = setInterval(function() { 
     $('#count').text(x); 
     if (x === $('iframe').length) { 
     clearInterval(time_id); 
     } 
    }, 200); 
});​ 

Các html:

<iframe src="http://www.w3schools.com"></iframe> 
<iframe src="http://www.w3schools.com"></iframe> 
<iframe src="http://www.w3schools.com"></iframe> 
<iframe src="http://www.w3schools.com"></iframe> 
<hr> 
Loaded iframe count: <span id="count">0<span> 

Answer 4

Javascript có "chức năng phạm vi" - biến chỉ tồn tại trong các chức năng chúng được tạo ra trong Vì vậy, nó có thể có các biến khác nhau đặt tên x, khi và chỉ. nếu họ đang ở trong các chức năng khác nhau (đó là trường hợp ở đây).

Biến được tạo bằng từ khóa var và được truy cập mà không có từ khóa. Vì vậy, var x = 10; tạo biến có tên là x và sửa đổi biến hiện tại có tên x.

Trong mã của bạn, mọi chức năng đều gọi var x = 10;. Kể từ khi được định nghĩa trước đó x được định nghĩa trong một hàm ngoài, dòng đó là hợp lệ và tạo ra một biến mới có tên là x, được sắp xếp theo hàm mà nó đang được gọi. Nếu bạn bỏ qua câu lệnh var, thì thông dịch viên đầu tiên sẽ xem xét không gian tên của hàm hiện tại và không tìm thấy x. Sau đó, nó sẽ di chuyển lên phạm vi toàn cầu và tìm số x mà bạn đã khai báo và sử dụng điều đó.

Nói tóm lại, bỏ qua lời var trong mỗi dòng trừ dòng 1:

var x = 0; 
$(document).ready(function() { 
    $('#iframe-2').load(function() { 
     x = x + 1; 
    }); 
    $('#iframe-3').load(function() { 
     x = x + 1; 
    }); 
    $('#iframe-4').load(function() { 
     x = x + 1; 
    }); 
    $('#iframe-5').load(function() { 
     x = x + 1; 
    }); 
}); 

Answer 5

Một giải pháp ALTER cho truy vấn trên sử dụng jQuery là đây ...

HTML:

<div id="top"></div> 
<iframe src="http://jquery.com/"></iframe> 
<iframe src="http://jquery.com/"></iframe> 
<iframe src="http://jquery.com/"></iframe> 
<iframe src="http://jquery.com/"></iframe> 
<div id="bottom"></div> 

JQuery:

var x = 0; 
$(function() { 
    $('iframe:eq(0)').load(function() { 
     x = x + 1; 
     result(x); 
    }); 
    $('iframe:eq(1)').load(function() { 
     x = x + 1; 
     result(x); 
    }); 
    $('iframe:eq(2)').load(function() { 
     x = x + 1; 
     result(x); 
    }); 
    $('iframe:eq(3)').load(function() { 
     x = x + 1; 
     result(x); 
    }); 

}); 

function result(x) { 
    if (x == null || typeof(x) == "undefined") x = 0; 
    $("#top").html("<div>Loaded iframe count: " + x + "</div><hr/>"); 
    $("#bottom").html("<hr/><div>Loaded iframe count: " + x + "</div>"); 
} 

Hãy thử trên codebins quá http://codebins.com/codes/home/4ldqpbk