jquery - add variable string to img src path on click -

jquery - add variable string to img src path on click -

i'm trying set variable within , image path using jquery on click. models function below sets folder variable folder name within image path. illustration of button 1 clicked want variable 'folder' set 'folder1', when click colour takes the image form folder. problem when take colour variable not passed path , right path assign image src.

jquery...

var folder = ''; //models $(function() { $('.folder1').click(function(){ var folder = 'folder1'; $(".selected-car").attr('src',"img/folder1/pic1.jpeg"); homecoming false; }); $('.folder2').click(function(){ var folder = 'folder2'; $(".selected-car").attr('src',"img/folder2/pic1.jpeg"); alert(model); homecoming false; }); $('.folder3').click(function(){ var folder = 'folder3'; $(".selected-car").attr('src',"img/folder3/pic1.jpeg"); homecoming false; }); $('.folder4').click(function(){ var folder = 'folder4'; $(".selected-car").attr('src',"img/folder4/pic1.jpeg"); homecoming false; }); }); //colours $(function() { $('.colour1').click(function(){ $(".selected-car").attr('src',"img/"+folder+"/cooper1.jpeg"); homecoming false; }); $('.colour2').click(function(){ $(".selected-car").attr('src',"img/"+folder+"/cooper2.jpeg"); homecoming false; }); });

html...

<div class="select-model"> <button class="folder1">model 1</button> <button class="folder2">model 2</button> <button class="folder3">model 3</button> <button class="folder4">model 4</button> </div> <div class="configuration clearfix"> <img src="img/folder1/pic6.jpeg" class="selected-car"><!-- default pic --> <div class="select-colour clearfix"> <a href="#"><img src="img/colour/colour1.jpeg" class="colour1"></a> <a href="#"><img src="img/colour/colour2.jpeg" class="colour2"></a> <a href="#"><img src="img/colour/colour3.jpeg" class="colour3"></a> <a href="#"><img src="img/colour/colour4.jpeg" class="colour4"></a> <a href="#"><img src="img/colour/colour5.jpeg" class="colour5"></a> <a href="#"><img src="img/colour/colour6.jpeg" class="colour6"></a> <a href="#"><img src="img/colour/colour7.jpeg" class="colour7"></a> <a href="#"><img src="img/colour/colour8.jpeg" class="colour8"></a> <a href="#"><img src="img/colour/colour9.jpeg" class="colour9"></a> <a href="#"><img src="img/colour/colour10.jpeg" class="colour10"></a> </div> </div>

i think should alter 'modal' variable name 'folder'. turn these :

var model = 'folder1'; var model = 'folder2'; var model = 'folder3'; var model = 'folder4';

to these :

var folder = 'folder1'; var folder = 'folder2'; var folder = 'folder3'; var folder = 'folder4';

jquery