jQuery中的簡單滑塊只在切換後顯示前兩張圖片

Question

我知道這個問題已經被問過很多次了，但我似乎沒有找到適合我的和正確的解決方案。我正在嘗試創建簡單的滑塊。當我點擊一張圖片時，另一張會顯示。這裏是一個codepen與代碼

最終我實際上想創建一個類似於函數的旋轉木馬，這將循環通過我的項目調用.animate({scrollLeft}) ...但我陷入循環實現以及。但嬰兒的步驟，對吧？

編輯：問題是我只撥動，然後再第二張照片出來的4

感謝您的幫助球員。

下面是代碼：

的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-flex; 
} 

.slide { 

} 

.isActive { 
    visibility: visible; 
} 

.isHidden { 
visibility: hidden; 
} 

index.js

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

    toggleVisibility = function(item) {  
    item.toggleClass('isHidden'); 
    item.next().removeClass('isHidden').addClass('isActive'); 
// item.next().removeClass('isHidden').animate({ scrollLeft: 200 + 'px'}, '500', 'swing', function() {console.log('Animation completed') }); 
    console.log(item); 
    } 

    toggleItem = function() { 
    var item = $('img:first').click(function() { // [QUESTION]The problem is here I think, since I'm just passing the first obj and not the list? 
     toggleVisibility(item); 
    }) 
    } 
    toggleItem(); 
}) 

Answer 1

您可以通過event.currentTarget參數來點擊函數來獲取當前的DOM元素。 而不是從下一個元素中移除隱藏類.isHidden，但將相同的類添加到該元素。

如果您單擊滑塊的最後一個元素，請返回到第一個圖像並執行您需要的操作。 檢查工作代碼：codePen

$(function() { 
 

 

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

 
    allImgItems.click(function(event, index) { 
 

 
    var item = $(event.currentTarget) 
 
    item.addClass('isHidden'); 
 
    item.next("img").removeClass('isHidden').addClass('isActive'); 
 
    item.next().removeClass('isHidden').animate({ 
 
     scrollLeft: 200 + 'px' 
 
    }, '500', 'swing', function() { 
 
     console.log('Animation completed') 
 
    }); 
 

 
    if ($(this).is(':last-child')) { 
 
     allImgItems.first("img").removeClass('isHidden').addClass('isActive'); 
 
    } 
 

 
    }); 
 
})

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
body { 
 
    background: black; 
 
} 
 
.container { 
 
    display: inline-flex; 
 
} 
 
.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="https://placehold.it/150x150"> 
 
    <img class='isHidden' src="https://placehold.it/150x150"> 
 
    <img class='isHidden' src="https://placehold.it/150x150"> 
 
</div>