什么是这个幻灯片代码更可读的版本？

Question

我想通过基于现有的开放源代码在网上做我自己的jQuery幻灯片来学习。

我迷失在一个编码块中，我认为这主要是因为我在编程/ jQuery中不是很强壮，而且编写它的人使用了一堆三元运算符（我相信这就是这是）。

有人可以帮我解决这个问题，甚至可以用更多的“传统”操作员来取代三元操作员吗？

//if no IMGs have the show class, grab the first image 
var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); 

//Get next image, if it reached the end of the slideshow, rotate it back to the first image 
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption') ? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); 

我对最后一行感到困惑。

Answer 1

我觉得它有助于缩进东西。

var next = (
    (current.next().length) ? (
    (current.next().attr('id') == 'slideshow-caption') ? 
     $('ul.slideshow li:first') 
     : current.next() 
    ) 
    : $('ul.slideshow li:first') 
); 

这将是等价的：

var next; 
if (current.next().length) { 
    if (current.next().attr('id') == 'slideshow-caption') { 
    next = $('ul.slideshow li:first'); 
    } else { 
    next = current.next(); 
    } 
} else { 
    next = $('ul.slideshow li:first'); 
} 

Answer 2

//if no IMGs have the show class, grab the first image 
var current; 
if ($('ul.slideshow li.show').length){ 
    // if we found an item with the show class, assign it to current 
    current = $('ul.slideshow li.show') 
}else{ 
    // otherwise nothing is being shown, default to first element 
    $('#ul.slideshow li:first'); 
} 

//Get next image, if it reached the end of the slideshow, rotate it back to the first image 
var next; 
// if there are additional elements (true when .length > 0) 
if (current.next().length){ 
    // is the next element the slideshow caption 
    if (current.next().attr('id') == 'slideshow-caption') 
    // it is, so go back to the first element 
    next = $('ul.slideshow li:first') 
    // it's not, continue on with the next element 
    else 
    next = current.next(); 
}else{ 
    // there is no next element, go back to first. 
    next = $('ul.slideshow li:first'); 
}