在循环中显示图标的JavaScript代码_Javascript_Jquery_Html_Twitter Bootstrap

在循环中显示图标的JavaScript代码

javascript jquery html twitter-bootstrap

在循环中显示图标的JavaScript代码,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我有一个脚本，它应该在一个循环中显示这7个图标。我想让它看起来像一部手机正在充电，但它不工作。如何将最后一个图标（assets/icons/ic\u battery\u charging\u full\u 48px.svg）添加到循环中 $(document).ready(function(){ var icons = [2,3,5,6,8,9]; function displayIcons() { var i;

我有一个脚本，它应该在一个循环中显示这7个图标。我想让它看起来像一部手机正在充电，但它不工作。如何将最后一个图标（assets/icons/ic\u battery\u charging\u full\u 48px.svg）添加到循环中

$(document).ready(function(){
        var icons = [2,3,5,6,8,9];

        function displayIcons() {
            var i;
            for (i = 0; i < icons.length; i++) {
                show(i);
            }
        }
        function show(i) {

            setTimeout(function() {

                    $('div span').html('<img src="assets/icons/ic_battery_charging_'+ icons[i] + '0_48px.svg">');

            }, 1000 + i * 1000);

        }

            displayIcons();

    });

$（文档）.ready（函数（）{
变量图标=[2,3,5,6,8,9]；
函数显示图标（）{
var i；
对于（i=0；i


这些是图标
<div class="container2">
        <img src="assets/icons/ic_battery_charging_20_48px.svg">
        <img src="assets/icons/ic_battery_charging_30_48px.svg">
        <img src="assets/icons/ic_battery_charging_50_48px.svg">
        <img src="assets/icons/ic_battery_charging_60_48px.svg">
        <img src="assets/icons/ic_battery_charging_80_48px.svg">
        <img src="assets/icons/ic_battery_charging_90_48px.svg">
        <img src="assets/icons/ic_battery_charging_full_48px.svg">
</div>



试试这个。在您的情况下，可以使用setInterval（）
而不是setTimeout（）

var图标=[2,3,5,6,8,9]；
var iconsLength=icons.length；
var i=0；
函数显示图标（）{
var myVar=setInterval（函数（）{
if（i
试试这个。在您的情况下，可以使用setInterval（）
而不是setTimeout（）

var图标=[2,3,5,6,8,9]；
var iconsLength=icons.length；
var i=0；
函数显示图标（）{
var myVar=setInterval（函数（）{
if（i
只需将最后一个添加到数组中，如下所示
$(document).ready(function () {

    var icons = [20, 30, 50, 60, 80, 90, 'full'];

    function displayIcons() {
        for (var i = 0; i < icons.length; i++) {
            show(i);
        }
    }

    function show(i) {

        setTimeout(function () {

            $('div span').html('<img src="assets/icons/ic_battery_charging_' + icons[i] + '_48px.svg">');

        }, 1000 + i * 1000);

    }

    displayIcons();
});

$（文档）.ready（函数（）{
变量图标=[20,30,50,60,80,90，'满']；
函数显示图标（）{
对于（变量i=0；i
只需将最后一个添加到数组中，如下所示
$(document).ready(function () {

    var icons = [20, 30, 50, 60, 80, 90, 'full'];

    function displayIcons() {
        for (var i = 0; i < icons.length; i++) {
            show(i);
        }
    }

    function show(i) {

        setTimeout(function () {

            $('div span').html('<img src="assets/icons/ic_battery_charging_' + icons[i] + '_48px.svg">');

        }, 1000 + i * 1000);

    }

    displayIcons();
});

$（文档）.ready（函数（）{
变量图标=[20,30,50,60,80,90，'满']；
函数显示图标（）{
对于（变量i=0；i
您更可能想要这样的东西（未经测试）

$（文档）.ready（函数（）{
var tId=setInterval（函数（）{
var$imgs$（“.charging”）；
变量$active=$（“.active”）；
如果（$active.length==0）$imgs.first（）.addClass（“active”）.show（）；
否则{
如果（$active.next（）.length=0）{
净空时间间隔（tId）；
}
否则{
$active.removeClass（“active.hide（）”；
$next.addClass（“活动”）.show（）；
}                          
}
},500);
})；
充电{显示：无}
您更可能想要这样的东西（未经测试）

$（文档）.ready（函数（）{
var tId=setInterval（函数（）{
var$imgs$（“.charging”）；
变量$active=$（“.active”）；
如果（$active.length==0）$imgs.first（）.addClass（“active”）.show（）；
否则{
如果（$active.next（）.length=0）{
净空时间间隔（tId）；
}
否则{
$active.removeClass（“active.hide（）”；
$next.addClass（“活动”）.show（）；
}                          
}
},500);
});
充电{显示：无}
这里有一个解决方案。它有点不同，但更好，因为由于使用了CSS，它既具有语义，又易于访问。屏幕阅读器可以读取“Charging…”文本，并且不会添加不必要的HTML图像。当然，您可以将文本更改为您想要的任何内容
CSS:
HTML:
这里有一个解决方案。它有点不同，但更好，因为由于使用了CSS，它既具有语义，又易于访问。屏幕阅读器可以读取“Charging…”文本，并且不会添加不必要的HTML图像。当然，您可以将文本更改为您想要的任何内容
CSS:
HTML:
试试这个。这是你要求的。最好将所有图像加载到dom中，而不是像我们希望的那样附加。如果它在网络上，则可能会导致负载延迟
JQuery：
$（文档）.ready（函数（）{
HTML：就像你已经做的那样
<div class="container2">
        <img src="assets/icons/ic_battery_charging_20_48px.svg">
        <img src="assets/icons/ic_battery_charging_30_48px.svg">
        <img src="assets/icons/ic_battery_charging_50_48px.svg">
        <img src="assets/icons/ic_battery_charging_60_48px.svg">
        <img src="assets/icons/ic_battery_charging_80_48px.svg">
        <img src="assets/icons/ic_battery_charging_90_48px.svg">
        <img src="assets/icons/ic_battery_charging_full_48px.svg">
</div>



我使用了“ul li”在这个JSFIDLE中播放：
试试这个。这可以按照您的要求工作。最好加载dom中的所有图像，而不是按照我们的要求进行附加。如果它在网络上，可能会导致加载延迟
JQuery：
$（文档）.ready（函数（）{
HTML：就像你已经做的那样
<div class="container2">
        <img src="assets/icons/ic_battery_charging_20_48px.svg">
        <img src="assets/icons/ic_battery_charging_30_48px.svg">
        <img src="assets/icons/ic_battery_charging_50_48px.svg">
        <img src="assets/icons/ic_battery_charging_60_48px.svg">
        <img src="assets/icons/ic_battery_charging_80_48px.svg">
        <img src="assets/icons/ic_battery_charging_90_48px.svg">
        <img src="assets/icons/ic_battery_charging_full_48px.svg">
</div>



我用“ul li”在这个JSFIDLE中玩：
我在这里写简单的代码，试试这个，在这个我用id获取图像位置，我用相同的id用于数组。我尝试了这个简单的解决方案，可能它会帮助你理解，你可以很容易地修改它

var图标=[1,2,3,4,5,6,7]；
$（文档）.ready（函数（）{
显示图标（）；
});
函数callShowHide（i）
{
$（“.charging”）.hide（）；
$（“#”+i.show（）；
if（i==icons.length）
{  
显示图标（）；
}
}
函数显示图标（）{
var i；
对于（i=1；i我在这里编写简单的代码，试试这个，在这里我使用id获取图像位置，我使用了用于数组的相同id
$(document).ready(function(e) {

    var delay = 100, // in ms, change to whatever you want
        current_icon_index = 0,
        icon_urls = [
            'assets/icons/ic_battery_charging_20_48px.svg',
            'assets/icons/ic_battery_charging_30_48px.svg',
            'assets/icons/ic_battery_charging_50_48px.svg',
            'assets/icons/ic_battery_charging_60_48px.svg',
            'assets/icons/ic_battery_charging_80_48px.svg',
            'assets/icons/ic_battery_charging_90_48px.svg',
            'assets/icons/ic_battery_charging_full_48px.svg'
        ];


    var step_through = function() {
        $('#chargingbox').css({
            'background-image': 'url(' + icon_urls[current_icon_index] +')'
        });
        current_icon_index++;
        if (current_icon_index === icon_urls.length-1) {
            current_icon_index = 0;
        }
        setTimeout(step_through, delay);
    };

    step_through();

});

        function displayIcons() {
            var target = $('.container2 img');
            var targetTotal = target.length;
            var i=0;
            target.hide().eq(0).show();

            setInterval(function(){

                target.hide().eq(i).show();
                if(i == targetTotal-1){
                    i=0;
                } else {
                    i=i+1;
                }

            },1000);
        }

        displayIcons();

    });

<div class="container2">
        <img src="assets/icons/ic_battery_charging_20_48px.svg">
        <img src="assets/icons/ic_battery_charging_30_48px.svg">
        <img src="assets/icons/ic_battery_charging_50_48px.svg">
        <img src="assets/icons/ic_battery_charging_60_48px.svg">
        <img src="assets/icons/ic_battery_charging_80_48px.svg">
        <img src="assets/icons/ic_battery_charging_90_48px.svg">
        <img src="assets/icons/ic_battery_charging_full_48px.svg">
</div>