Question

我在javascript中遇到问题 [NOT JQUERY] ; 我想创建幻灯片，为我创建的每个幻灯片，当用户点击它时，跳转到那张幻灯片......

var images = $('#images img'), image;

for(var i = 0; image = images[i]; i++)
{

    var a = document.createElement('span');
    a.onclick = function(){
        var img = image;
        removeClass();
        console.log(img);
        img.className = 'active';
    }

    $('#nav')[0].appendChild(a);

}

在上面的代码我尝试从幻灯片中删除活动类名，然后将活动添加到相关幻灯片，但我不知道如何在span.onclick函数中获取该幻灯片

我的代码：

<!doctype html>

<head>

    <title>Welcome</title>
    <style>
        #images {position:relative;}
        #images img {position:absolute;top:0;right:0;opacity:0;transition:all 0.8s;-webkit-transition:all 0.8s;}
        .active {opacity:1!important;}
        #nav span {display:inline-block;width:12px;height:12px;background:red;border:1px solid #CCC;cursor:pointer;}
    </style>
</head>
<body>
    <div id="images">
        <img src="1.jpg" class="active" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
        <img src="5.jpg" />
        <img src="6.jpg" />
    </div>
    <div id="nav"></div>
</body>


<script>

    function $(id)
    {
        return document.querySelectorAll(id);
    }

    function removeClass(){
        var images = $('#images img'), image;
        for(var i = 0; image = images[i]; i++)
        {
            image.className = '';
        }
    }


    var images = $('#images img'), image;

    for(var i = 0; image = images[i]; i++)
    {

        var a = document.createElement('span');
        a.onclick = function(){
            var img = image;
            removeClass();
            console.log(img);
            img.className = 'active';
        }

        $('#nav')[0].appendChild(a);

    }

    function start(){
        return setInterval(function()
        {
            var current = $('.active')[0];
            var next = current.nextElementSibling;
            if(!next){
            console.log('noefds f as');
                next = $('#images img:first-child')[0];
            }
            current.className = '';
            next.className = 'active';

        },1000);
    };

    slide = start();

    var holder = $('#images')[0];

    holder.onmouseenter = function(){

        clearInterval(slide);

    }

    holder.onmouseleave = function(){
        slide = start();
    }

</script>

Answer 1

JavaScript没有块范围，因此您创建的所有点击处理程序都引用相同的image变量。您可以通过引入新函数并立即调用它来创建范围：

var a = document.createElement('span');
a.onclick = (function(img){
    return function() {
        removeClass();
        img.className = 'active';
    };
})(image);

或稍微清洁，但您可能需要在oldIE中填充forEach：

var images = $('#images img'), nav = $("#nav")[0];
[].forEach.call(images, function(image){
    var a = document.createElement('span');
    a.onclick = function(){
        removeClass();
        image.className = 'active';
    }
    nav.appendChild(a);
});

Answer 2

您可以重新构建代码：

var $images = $('#images img').each(function() {
    var $this = $(this);
    $("<span>Text here</span>").on("click", function() {
        $images.removeClass("active");
        $this.addClass("active");
    }).appendTo("#nav");
});

元素循环中的javascript onclick事件[no jQuery]

2 个答案: