Javascript-форум - Оптимизация скрипта

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Оптимизация скрипта (https://javascript.ru/forum/misc/38564-optimizaciya-skripta.html)

Оптимизация скрипта

Добрый день всем. С JS особо не дружу, по этому возникла просьба к специалистам. Значит суть вопроса таква, на страницу подгружается 2 блока, в левой части название областей, при нажатии на область в правом всплывает список городов в этой области, я вывел на страницу всю информацию и скрыл ее а на Jquery написал следующее

$(document).ready(function() {
$(".cities_group").hide();
$("#reg1").show();

$("#2").click(function () {$(".cities_group").hide();$("#reg2").show();});
$("#1").click(function () {$(".cities_group").hide();$("#reg1").show();});
$("#3").click(function () {$(".cities_group").hide();$("#reg3").show();});
$("#4").click(function () {$(".cities_group").hide();$("#reg4").show();});
$("#5").click(function () {$(".cities_group").hide();$("#reg5").show();});
$("#6").click(function () {$(".cities_group").hide();$("#reg6").show();});
$("#7").click(function () {$(".cities_group").hide();$("#reg7").show();});
$("#8").click(function () {$(".cities_group").hide();$("#reg8").show();});
$("#9").click(function () {$(".cities_group").hide();$("#reg9").show();});
$("#10").click(function () {$(".cities_group").hide();$("#reg10").show();});
$("#11").click(function () {$(".cities_group").hide();$("#reg11").show();});
$("#12").click(function () {$(".cities_group").hide();$("#reg12").show();});
$("#13").click(function () {$(".cities_group").hide();$("#reg13").show();});
$("#14").click(function () {$(".cities_group").hide();$("#reg14").show();});
$("#15").click(function () {$(".cities_group").hide();$("#reg15").show();});
$("#16").click(function () {$(".cities_group").hide();$("#reg16").show();});
$("#17").click(function () {$(".cities_group").hide();$("#reg17").show();});
$("#18").click(function () {$(".cities_group").hide();$("#reg18").show();});
$("#19").click(function () {$(".cities_group").hide();$("#reg19").show();});
$("#20").click(function () {$(".cities_group").hide();$("#reg20").show();});
$("#21").click(function () {$(".cities_group").hide();$("#reg21").show();});
$("#22").click(function () {$(".cities_group").hide();$("#reg22").show();});
$("#23").click(function () {$(".cities_group").hide();$("#reg23").show();});
$("#24").click(function () {$(".cities_group").hide();$("#reg24").show();});
$("#25").click(function () {$(".cities_group").hide();$("#reg25").show();});

});

Но мне кажется что этот код можно как-то упростить, помогите пожалуйста кому не сложно и еще вопрос, подобный код как-то негативно может влиять на сайт, ну тоесть глюки или тормоза? Заранее спасибо!

упростить можно до нескольких строк
нужен хтмл чтоб сказать как

$(document).ready(function() {
$(".cities_group").hide();
$("#reg1").show();
for(var i=1;i<26; i++){
$("#"+i).click(function () {$(".cities_group").hide();$("#reg"+i).show();});
}
});

Огромное спасибо за отклик на мое просьбу, я как то и хотел применить цикл, ноя не совсем понимаю как он работает в JS. Но всеравно Ваш код как-то не так работает, хотя я понимаю что должно все работать... При клике исчезают все блоке с .cities_group ну а нужный блок с id reg+i не появляется... Не пойму почему так.

Цитата:

Сообщение от Veritaspl

а нужный блок с id reg+i не появляется... Не пойму почему так.

И не должен .
Чему равно i на момент полной отработки цикла и вызова функции обработчика $("#reg"+i), учитывая что i глобальная?
а эта тема есть в http://learn.javascript.ru/

так

$(document).ready(function() {
  var group = $(".cities_group") ;
  group.hide() ;
  $("#reg1").show() ;
  for(var i = 1; i < 26; i++) {
    $("#"+i).click(function () {
      group.hide() ;
      $("#reg"+this.id).show() ;
    }) ;
  } ;
}) ;

Или так

$(document).ready(function() {
  var group = $(".cities_group") ;
  group.hide() ;
  $("#reg1").show() ;
  for(var i = 1; i < 26; i++) (function(i) {
    $("#"+i).click(function () {
      group.hide() ;
      $("#reg"+i).show() ;
    }) ;
  })(i) ;
}) ;

Зачем программно генерить обработчики событий , если можно обойтись делегированием и одной цепочкой?

Цитата:

Сообщение от dmitriymar

Зачем программно генерить обработчики событий , если можно обойтись делегированием и одной цепочкой?

Можно дать имя обработчику и навешивать его одного на все элементы, а не дублировать. Вместо череды id'шников лучше проставить класс - так будет удобнее и легче добавлять элементы.

Спасибо большое всем за советы!!! Сейчас буду разбираться по ним!

Цитата:

Сообщение от Veritaspl

я как то и хотел применить цикл, ноя не совсем понимаю как он работает в JS

Цикл он и в Африке цикл! :D