Как облегчить код jquery?

Question

[vedernikov]

$('#ts5-right').click(function(){
           var cur=$('#ts5 > li:not(.text-hide)');
           var next=cur.next('li');
           if(!next.hasClass('text-hide')) next=$('#ts5 > li:first');
           cur.addClass('text-hide');           
           next.removeClass('text-hide');
        });
        $('#ts5-left').click(function(){
           var cur=$('#ts5 > li:not(.text-hide)');
           var prev=cur.prev('li');
           if(!prev.hasClass('text-hide')) prev=$('#ts5 > li:last');
           cur.addClass('text-hide');           
           prev.removeClass('text-hide');
        });

#ts может быть и #ts1, #ts2, ..., #tsN
Как можно облегчить код, чтобы не городить для каждого #ts* такое?

Answer 1

[Eugene_Sh]

Через цикл прогонять, например:

var n = 5;

for (var i = 1; i <= n; i++) {
   $('#ts' + i + '-right').click(function() { ... });

   $('#ts' + i + '-left').click(function() { ... });
}

А еще можешь:

function addEventTs(n) {
   $('#ts' + n + '-right').click(function() { ... });

   $('#ts' + n + '-left').click(function() { ... });   
}

addEventTs(1);
addEventTs(5);

А можешь скомбинировать.

Answer 2

[Rsa97]

Использовать в селекторе не id, а class

$('.tsN-right').click(function() {
    var cur = $(this)...// здесь написать выбор нужного элемента от кликабельного //
    var next = cur.next('li');
    if (!next.hasClass('text-hide'))
        next=$(this)...;
    cur.addClass('text-hide');           
    next.removeClass('text-hide');
});

Comments

[Eugene_Sh]

Кстати, да.

Answer 3

[xmoonlight]

есть еще вариант, если нужны разные события (ветвления логики):

$('.tsN-right').each(function() {
       $(this).click(function(){
           var cur=$('#ts5 > li:not(.text-hide)');
           var next=cur.next('li');
           if(!next.hasClass('text-hide')) next=$('#ts5 > li:first');
           cur.addClass('text-hide');           
           next.removeClass('text-hide');
        });
  });