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');

我可以将此jquery脚本减少到一行吗？

5 个答案: