使用.removeClass（）的條件語句;在.show（）中;和.hide（）;功能

場景：我創建了一個簡單的顯示/隱藏功能，允許用戶點擊IMG並顯示後續內容。使用.removeClass（）的條件語句;在.show（）中;和.hide（）;功能

預期行爲：當用戶點擊IMG，.service-img，我想選擇的IMG內容，.service-content，以.addClass('fadeIn');而.removeClass('fadeIn');從先前選擇的/可見的內容。

問題：雖然條件是成功的.addClass('fadeIn');它在.removeClass('fadeIn');似乎對類添加到所有.service-content被點擊的.service-img時失敗。

我的假設：雖然我問if ($('.service-content').is(':visible')) .addClass etc...我從來沒有真正刪除類，因爲技術上.service-content總是可見的被點擊.service-img時。

問題：我怎麼能寫正確的條件，以檢查是否當前所選元素.is(':visible')然後執行功能，如果不顧一切內容元素共享相同的類名。

數，半成功的嘗試

// Function Attempt 1 shows .service-content but adds .fadeIn 
// to .service-img so service content never Fades Into view 
$('.service-content').hide(); 
$('.service-content:first-child').show(); 
$('.service-img').click(function() { 
    $('.service-content').hide(); 
    $('.service-content').eq($(this).index()).show(); 
    if ($('.service-content').is(':visible')) { 
    $(this).addClass('fadeIn') 
    } else { 
    $(this).removeClass('fadeIn'); 
    } 
}); 

// Function Attempt 2 
$('.service-content').hide(); 
$('.service-content:first-child').show(); 
$('.service-img').click(function() { 
    $('.service-content').hide(); 
    $('.service-content').eq($(this).index()).show(); 
    if ($('.service-content').is(':visible')) { 
    $('.service-content').addClass('fadeIn') 
    } else { 
    $('.service-content').removeClass('fadeIn'); 
    } 
}); 

// Function Attempt 3 
$('.service-content').hide(); 
$('.service-content:first-child').show(); 
$('.service-img').click(function() { 
    $('.service-content').hide(); 
    $('.service-content').eq($(this).index()).show(); 
    if ($('.service-content').eq($(this).index()).is(':visible')) { 
    $('.service-content').eq($(this).index()).addClass('fadeIn') 
    } else { 
    $('.service-content').eq($(this).index()).removeClass('fadeIn'); 
    } 
});

下面是完整的原型：JS Fiddle

來源

2017-04-25 WeebleWobb

這會不會小提琴解決您的問題：https://jsfiddle.net/tc9L1k14/21/ – funcoding

無toggleClass（）功能不起作用。當你在元素之間點擊時，我沒有看到fadeIn類正在執行。期望的效果是添加fadeIn類的內容，導致它淡入，然後刪除類fadeIn當一個不同的IMG被點擊，導致它淡入等...等... – WeebleWobb

您並不需要檢查元素是否可見。我想這會做到這一點。

https://jsfiddle.net/3fbzrto0/30/

$('.service-img').on('click', function(){ 
    var index = $(this).index(); 
    var content = $('.service-content').eq(index); 
    //hide all visible elements 
    $('.service-content').hide(); 
    $('.service-content').removeClass('fadeIn'); 

    content.show(); 
    content.addClass('fadeIn'); 
});

來源

2017-04-26 01:11:25 doutriforce

之前放一些延遲這個函數可以工作，但所有'.service-content'都可見，但是沒有添加fadeIn類。這會導致所有div垂直堆棧，使用「opactiy：0」，然後單擊「.fadeIn」而不是垂直堆棧順序中的當前位置。** [見JS小提琴示例]（https://jsfiddle.net/WeebleWobb/3fbzrto0/）** – WeebleWobb

@WeebleWobb，對不起，我編輯了我的答案。請檢查它裏面的小提琴。 – doutriforce

儘管這兩個答案都達到了我的預期行爲，但這個答案利用了變量，幫助我更好地理解變量最佳實踐和[_Don't Repeat Yourself_哲學]（https://en.wikipedia.org/wiki/Don%27t_repeat_yourself）。 – WeebleWobb

我想告訴你新選擇的元素之前，您需要刪除較早的一個第一。即removeClass應該在addClass之前。

$('.service-content').removeClass('fadeIn'); //Assuming this will remove class fadeIn from all elements. 
$('.service-content').eq($(this).index()).show(); 
if ($('.service-content').eq($(this).index()).is(':visible')) { 
     $('.service-content').eq($(this).index()).addClass('fadeIn') 
     }

來源

2017-04-25 23:54:01

移動'$（'。service-content '）.removeClass（'fadeIn'）;''.show（）'似乎工作。它允許fadeIn類在重複點擊時執行。我注意到當我拉起Chrome Inspector並嘗試函數時，fadeIn類永遠不會從.service-content中移除它自己，但仍會執行fadeIn動畫。這是因爲函數運行速度如此之快，fadeIn刪除在檢查器中不可見，或者這可能導致一些問題？ – WeebleWobb

這是正確的，爲了驗證你可以在'.show（）' –

使用.removeClass（）的條件語句;在.show（）中;和.hide（）;功能

回答

相關問題