jQuery комментировать заявления?

Question

Как я могу упростить эти заявления, вместо того, чтобы посчитать все пути УПТ до 34 и с 34 отдельными заявлениями ... ..

$('a#timeline-2010-lnk1').click(function() { 
    $('#timeline-2010-1').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk2').click(function() { 
    $('#timeline-2010-2').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk3').click(function() { 
    $('#timeline-2010-3').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk4').click(function() { 
    $('#timeline-2010-4').show(); 
    return false; 
    }); 

Answer 1

$("a[id^=timeline-2010-lnk]").live("click", function() { 
    var num = this.id.split(/-(?:lnk)?/).pop(); 
    $('#timeline-2010-'+num).show(); 
    return false; 
}); 

Более эффективным, поскольку он использует delegate()/live(). Вместо того, чтобы прикреплять много обработчиков кликов, один обработчик помещается на общий узел предка, к которому кликают события.

Как @rochal pointed out, еще более подходящим может быть использование одного имени класса для всех элементов и использование взаимосвязи между двумя элементами (через parent/etc). Однако, если вы можете, вы все равно должны использовать live() или delegate() для обработчика.

Answer 2

Добавить общее Classname к каждому элементу:

<a href="#" id="timeline-2010-lnk1" class="clicker">Text 1</a> 
<a href="#" id="timeline-2010-lnk2" class="clicker">Text 2</a> 
<a href="#" id="timeline-2010-lnk3" class="clicker">Text 3</a> 
<a href="#" id="timeline-2010-lnk4" class="clicker">Text 4</a> 
<a href="#" id="timeline-2010-lnk5" class="clicker">Text 5</a> 
... 

Тогда вы могли бы упростить HTML, и избавиться от идентификаторов все вместе:

<a href="#" class="clicker">Text 1</a> 
<a href="#" class="clicker">Text 2</a> 
<a href="#" class="clicker">Text 3</a> 
<a href="#" class="clicker">Text 4</a> 
<a href="#" class="clicker">Text 5</a> 
... 

Тогда все, что вам нужно сделать, это :

$('.clicker').click(function() { 
    $(this). /* parent? sibling? I'd have to see your code */ .show(); 
    return false; 
}); 

Node относительно моего комментария в коде:

Я предполагаю, что #timeline-2010-[X] является своего рода DIV вы хотите показать, поэтому вместо того, чтобы использовать идентификаторы снова применить класс и использовать .siblings() или .find() т.д.

Answer 3

До тех пор, пока вы используете JQuery, попробовать что-то вроде это:

$('a[id^=timeline-2010-lnk]').click(function() { 
    var id = '#' + this.id.replace(/lnk/, ''); 
    $(id).show(); 
    return false; 
}); 

Это будет захватывать все ссылки, идентификатор атрибута начинается с «временной шкалы-2010-LNK» и прикрепить событие щелчка. Вы получаете соответствующий идентификатор, просто удалив часть «lnk» из идентификатора ссылки.

Вот документ для «атрибута начинается с» селектор: http://api.jquery.com/attribute-starts-with-selector/

Кроме того, здесь простой демонстрационный показ этого метода в действии: http://jsfiddle.net/eL3Yw/

Answer 4

Вы можете использовать for цикл как Luca предполагалось ранее (удалена). Но вы должны создать помощник «самостоятельно вызов функции» для того, чтобы держать вещи прямо:

for(var i=1; i<=34; i++) { 
    (function(index){ 
     $('a#timeline-2010-lnk'+index).click(function() { 
      $('#timeline-2010-'+index).show(); 
      return false; 
     }); 
    })(i); 
}​ 

Почему? Javascript имеет только function scope, а не block scope, как на большинстве других C-подобных языков. Таким образом, i не связан с областью for-loop ПОЭТОМУ closure functions, который вы создаете как обработчик событий, click будет ссылаться на то же самое i.

Создав новую функцию, которая вызывает себя во время выполнения, вы можете обойти эту проблему.

Answer 5

Используйте селектор атрибутов startswith с символом $.каждый

$('a[id^=timeline-2010-lnk]').each(function() { 
    var idx = $(this).attr('id').match(/\d+$/); 

    if (idx !== null) { 
     $(this).click(function() { 
      $('#timeline-2010-' + idx[0]).show(); 
      return false; 
     }); 
    } 
});