我可以將這個jquery腳本減少到一行嗎？

Question

我寫了這個代碼

if (forw == true) 
    { 
    if ($('.tickertape li.active')[0] != $('.tickertape li').last()[0]) 
     { 
     $('.tickertape li.active').removeClass('active').next().addClass('active'); 
     } 
    else 
     { 
     $('.tickertape li.active').removeClass('active'); 
     $('.tickertape li').first().addClass('active'); 
     } 
    } 
else 
    { 
    if ($('.tickertape li.active')[0] != $('.tickertape li').first()[0]) 
     { 
     $('.tickertape li.active').removeClass('active').prev().addClass('active'); 
     } 
    else 
     { 
     $('.tickertape li.active').removeClass('active'); 
     $('.tickertape li').last().addClass('active'); 
     } 
    } 

這工作，但真的感覺它應該只在一行上。有沒有辦法做到這一點？

Answer 1

$('.tickertape li.active').removeClass('active')[forw == true ? 'next' : 'prev']().addClass('active'); 

方括號和條件運算的組合可用於選擇屬性next或prev。

---

可能換行方式更清晰......

$('.tickertape li.active') 
    .removeClass('active') 
    [forw == true ? 'next' : 'prev']() // select the 'next' or 'prev' property 
    .addClass('active'); 

Answer 2

你可以使用三元運算符，但說實話，這是很難讀取的。

forw == true ? $('.tickertape li.active').removeClass('active').next().addClass('active') : $('.tickertape li.active').removeClass('active').prev().addClass('active'); 

Terany Operator

Answer 3

3線（空格爲簡潔起見）：

var ticker = $('.tickertape li.active'); 

ticker.removeClass('active'); 

(forw == true) ? ticker.next().addClass('active') : ticker.prev().addClass('active'); 

雖然我個人會說你有什麼上面是好的;它比上面使用的conditional operator更具可讀性，並且不會太長或明顯較慢。

Answer 4

即使你可以，我也不會推薦它。因爲這已經有點難以閱讀了。只是因爲某件事可以在一條線上完成並不意味着它應該是。你還應該考慮代碼的可讀性。

Answer 5

你可以做像這樣一個非常長的單行...

forw ? $('.tickertape li.active').removeClass('active').next().addClass('active') : $('.tickertape li.active').removeClass('active').prev().addClass('active'); 

但是，一個更加可行的解決方案，雖然是添加一個jQuery擴展這種類型的方法

(function($) { 
    $.fn.nextOrPrev = function(useNext) { 
    return this.each(function() { 
     if (useNext) { 
     return $(this).next(); 
     } else { 
     return $(this).prev(); 
     } 
    } 
    }; 
}); 

然後你可以簡化它

$('.tickertape li.active').removeClass('active').nextOrPrev(forw).addClass('active');