滑塊與setTimeout - 'removeClass不是一個函數錯誤'

所以我今天早些時候問了一個類似的問題，但我想在我的代碼中進行升級。我正嘗試創建一個帶有setTimeout函數的滑塊，但我一直在對象上獲取removeClass is not a function error。這裏是一個codepen與代碼滑塊與setTimeout - 'removeClass不是一個函數錯誤'

再次在此先感謝。

的index.html

<div class=container> 
    <img class='isActive' src="http://placehold.it/350x150"> 
    <img class='isHidden' src="http://placehold.it/350x150"> 
    <img class='isHidden' src="http://placehold.it/350x150"> 
    <img class='isHidden'src="http://placehold.it/350x150"> 
</div>

index.scss

html { 
    box-sizing: border-box; 
} 

*, 
*:before, 
*:after { 
    box-sizing: inherit; 
} 

body { 
    background: black; 
} 

.container { 
display: inline; 
//border: 1px solid white; 
} 

.slide { 

} 

.isActive { 
    visibility: visible; 
} 

.isHidden { 
visibility: hidden; 
}

index.js

$(function() { 
    var timer; 
    var $allImgItems = $('img'); 
    var $items = $('.container').find($allImgItems); 

    for (let i = 0; i < $items.length; i++) { 
    var $item = $items[i]; 
    $item.removeClass('isHidden').addClass('isActive') 
              /*$item.removeClass('isHidden').addClass('isActive).setTimeout(function() { $(this).animate({ scrollLeft: 200 + 'px' }), '500', 'swing', function() { console.log('Animation completed') } }) */ 
    console.log(`We are at this item: ${$item}`);  
    } 
})

來源

2016-11-17 intercoder

你可以用'$取代一切找到（ 'IMG '）removeClass（' 是否隱藏 '）addClass（' isActive '）（' 集裝箱'）;。'，有不需要循環來移除和添加相同的類，jQuery爲您做到了這一點。 – adeneo

看看我是如何改變你的js功能的。似乎現在工作正常。

$(function() { 
 
    var timer; 
 
    var $items = $('img', '.container'); 
 

 
    for (let i = 0; i < $items.length; i++) { 
 
    var item = $items[i]; 
 
    $(item).removeClass('isHidden').addClass('isActive'); 
 
    console.log(`We are at this item: ${item}`);  
 
    } 
 
})

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    background: black; 
 
} 
 

 
.container { 
 
display: inline; 
 
//border: 1px solid white; 
 
} 
 

 
.slide { 
 
    
 
} 
 

 
.isActive { 
 
    visibility: visible; 
 
} 
 

 
.isHidden { 
 
visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=container> 
 
    <img class='isActive' src="http://placehold.it/350x150"> 
 
    <img class='isHidden' src="http://placehold.it/350x150"> 
 
    <img class='isHidden' src="http://placehold.it/350x150"> 
 
    <img class='isHidden'src="http://placehold.it/350x150"> 
 
</div>

來源

2016-11-17 15:34:36 Flyer53

jQuery的selecto ř這裏

var $items = $('.container').find($allImgItems);

返回元件的陣列，但這些元件不jQuery的對象本身。抓取一個元素後，將其包裝在$()中以使其成爲jQuery對象。

var $item = $($items[i]);

來源

2016-11-17 15:18:30 IrkenInvader

謝謝澄清，男士。 – intercoder

當你做

var $items = $('.container').find($allImgItems); 
    for (let i = 0; i < $items.length; i++) 
    { 
    var $item = $items[i];

的$項目是一個html節點不是一個jQuery對象，而.removeClass是一個jQuery對象功能，所以你需要改變它這樣。

$($item).removeClass('isHidden').addClass('isActive')

來源

2016-11-17 15:19:26 Deep

滑塊與setTimeout - 'removeClass不是一個函數錯誤'

回答

相關問題