JavaScript元素循環中的onclick事件[沒有jQuery]

我在javascript中有問題[NOT JQUERY]; 我想創建幻燈片，每張幻燈片我創建了希望在其上的用戶點擊，跳轉到該幻燈片......JavaScript元素循環中的onclick事件[沒有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>

來源

2012-12-26 Hadi Mostafapour

你爲什麼混合DOM和jQuery來選擇元素？ – epascarello

那裏沒有jQuery，它是我的自定義選擇器功能 –

@ MR.OK'$（'＃nav'）'看起來很像jQuery給我。或Zepto。 – andlrc

JavaScript沒有塊範圍，所以你創建指的是同一image變量的點擊處理程序。您可以通過引入新的功能，並立即調用它創建範圍：

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

或者稍微乾淨，但您可能需要墊片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); 
});

來源

2012-12-26 20:50:20 Dennis

...但這不是你如何做到的。你是否想要返回一個函數？ – Ryan

是的，所以謝謝：D –

-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"); 
});

來源

2012-12-26 20:40:47 andlrc

javascript解決方案plz：| –

JavaScript元素循環中的onclick事件[沒有jQuery]

回答

相關問題