Question

I have a site based on wordpress and I want to change the header image for every single post. As every post has its own ‘id’, I want to make a jquery function which would read the post ‘id’ (for example id=”post-8″) and would set a background image named the same way, so I just have to make a new image and upload it everytime I write a new post, and no css changes would be needed.

I have very bare idea of jquery, but my bro’s help I got the following code:

var txt1 = "post-";
        for (var i=0; i<1000; i++){
        var elementId = txt1.concat(i);
        var postimg1 = "url(../images/";
        var postimg2 = ".jpg)";
        var postimgfull = postimg1 + elementId + postimg2;
        var element =  $("#" + elementId);
        if (element != null) {
            $(".posthead").css('background-image', postimgfull);
        }else {
            break;
        }

But using that I don’t get the image named “post-8.jpg”, what I get is an image named “post-999.jpg”.

Can you help me here?

Thankyou mates!

Answer 1

I guess everything goes fine in your code except there should be

element.css('background-image', postimgfull);

in stead of

$(".posthead").css('background-image', postimgfull);

and it should be good to go.