How to shorthand this jquery code using variables?

Question

I'm trying to find a solution using variables or some other jQuery technique that will allow me to completely shorten the following code.

For example, how would I be able to set "ptn_" as a variable/constant and let jquery pick the number?

Or, could I just use a couple of simple variables to make things tidier and easier in the long run?

Say if I ever wanted to add more items, would I simply just be able to add the HTML code, and let the jQuery code pull the image from the CSS and display it upon click of a specific ID?

I'm a bit confused how to go about this, yes, Google is your friend and no, I haven't found a real solution anywhere :P I'm hoping someone can shed some light on how to change this. I don't expect the work doing for me, just some form of solution.

The messy jQuery:

.four

Is the container

.headercolor

Is the header color class within the container.

.patternwrap 

Is the body wrapped div that will display the pattern when #ptn_X ID is clicked.

This is the function that will change the entire container holding the divs.

 $(function(){  
$('.button-preview').on('click', function() {
    $('.mainbody').css('background', 'rgba(0,0,0,0.4)');
    $('.four, .headercolor').css('color', '#fff');
})

The following are the patterns.

$('#ptn_1').on('click', function() {
    $('.patternwrap').css('background-image', 'url(images/img/ptn_00001.png)');
})
$('#ptn_2').on('click', function() {
    $('.patternwrap').css('background-image', 'url(images/img/ptn_00002.png)');
})
$('#ptn_3').on('click', function() {
    $('.patternwrap').css('background-image', 'url(images/img/ptn_00003.png)');
})
$('#ptn_4').on('click', function() {
    $('.patternwrap').css('background-image', 'url(images/img/ptn_00004.png)');
})
});

The HTML Button that when clicked, will display the jquery selector based on the ID:

<div class="button-preview" id="ptn_1">Preview</div>
<!-- Div container displaying the pattern PREVIEW -->
<div class="pattern" id="ptn_00001"></div>

The CSS:

#ptn_00001 {background:url(../images/cfpatterns/ptn_00001.png)}
#ptn_00002 {background:url(../images/cfpatterns/ptn_00002.png)}
#ptn_00003 {background:url(../images/cfpatterns/ptn_00003.png)}
#ptn_00004 {background:url(../images/cfpatterns/ptn_00004.png)} 

Many thanks.

Answer 1

You can shorten the jquery code with this :

$('#ptn_1, #ptn_2, #ptn_3, #ptn_4').on('click', function() {
    var i = this.id.substr(-1);
    $('.patternwrap').css('background-image', 'url(images/img/ptn_0000'+ i +'.png)');
});

When you click the button, the var 'i' is created and take the value of the last caracter of the clicked button's id.

Answer 2

var i = 0;
$('#ptn_1, #ptn_2, #ptn_3, #ptn_4').on('click', function() {
    $('.patternwrap').css('background-image', 'url(images/img/ptn_0000' + (i++) + '.png)');
});

or if the above doesn't work:

for (var i = 1; i < 5; i++) {
    $('#ptn_' + i).on('click', function() {
        $('.patternwrap').css('background-image', 'url(images/img/ptn_0000' + i+ '.png)');
    });

};

One other way I would do this is use a class instead of an ID and use the .each function.

Answer 3

You can just create a function that deals with the operation that you want to do. Something like this:

function change_image(id){
  $('.' + id).css('background-image', 'url(images/img/'+ id +'.png)');
}

As for the click handler. You can have a container and just select the children from that container:

$('#container div').on('click', function(){
   var id = $(this).attr('id');
   change_image(id);
});

While you're coding and you find yourself repeating stuff, stop and try to find some patterns that you can encapsulate inside a function.

Answer 4

A simple Solution will be

• Add a common Event handler
• call a commonfunction setBackgroung(id) with id parameter
• let the setBackgroung to calculate the image name and div name from the id passed