Как сократить повторяющийся код?

Question

[Andrey Dontsov]

Добрый день
Подскажите пожалуйста, как правильно написать, чтобы код не повторялся?
5 айтемов с цветом, при клике на которые подставляется нужная картинка.
Спасибо

$('a.container1').click(function(){
	$('.img_box').css('background' , 'url(img/color1.jpg)');
	return false;
});
$('a.container2').click(function(){
	$('.img_box').css('background' , 'url(img/color2.jpg)');
	return false;
});
$('a.container3').click(function(){
	$('.img_box').css('background' , 'url(img/color3.jpg)');
	return false;
});
$('a.container4').click(function(){
	$('.img_box').css('background' , 'url(img/color4.jpg)');
	return false;
});
$('a.container5').click(function(){
	$('.img_box').css('background' , 'url(img/color5.jpg)');
	return false;
});

Answer 1

[Олег]

<a class="container" data-bg="1">container1</a>

$('a.container').click(function(){
  $('.img_box').css('background' , 'url(img/color' + $(this).data('bg') + '.jpg)');
  return false;
});

Comments

[Andrey Dontsov]

значит все-таки data атрибуты... спасибо, Олег!

[Dark Hole]

AndreyBLG: можно и без них. Это костыли всего-лишь)

[Олег]

Dark Hole: Это не костыли, как раз для подобных задач и были придуманы эти атрибуты, в данном случае лучшее решение, подход с индексом и циклом не очень универсальный.

[Dark Hole]

Олег: в данном случае, логичнее. И проще. Универсальность никто не просил

Answer 2

[Сергей Горностаев]

<a class="container" data-color="1" href="#">blablabla</a>

$('a.container').click(function(e) {
  e.preventDefault();
  var color = $(this).data('color');
  $('.img_box').css('background' , 'url(img/color' + color + '.jpg)');
});

Answer 3

[Dark Hole]

for(var counter = 1; counter <= 5; counter++){
  $('a.container'+counter).click(function(){
    $('.img_box').css('background' , 'url(img/color'+counter+'.jpg)');
    return false;
  });
}

Надеюсь, вы не индус)

Comments

[Andrey Dontsov]

Спасибо за ваш ответ.
Ваш цикл не решает задачу, при клике на любой из блоков a.container блоку .img_box присваивается background: color6.jpg , т.е. последнее число после прогонки цикла.
Посмотрите вопрос внимательнее, если вы не индус все станет ясно)
Шучу) прошу меня извинить) я с уважением и благодарностью отношусь к вашему ответу и допускаю, что сам могу ошибаться, все же я здесь ученик и обращаюсь к вам за помощью) Спасибо!

[Dark Hole]

AndreyBLG: а ну да) Тут нужно было немного по-другому