Question

I have the following working code: http://jsfiddle.net/NtHwN/4/

It will deduct the number that is in the input field when pressing the hyperlink or button by -1 and will do this just one time for both. This works great.

Now I have 3 images: 1.jpg, 2.jpg and 3.jpg. I want to show this image depending on the number in the input field. So I’ve added:

<div id="img_select"><img src="test/images/3.jpg" alt=""></div>

Now, if the user clicks the button or hyperlink, the nr will change from 3 to 2. When this happens, the image should also change from “test/images/3.jpg” to “test/images/2.jpg”, but how to do this with jQuery? (so the nr in the input field corresponds with the nr in the .jpg)

Played around with this:

$(function () {
    $('#image_select').attr('img_', {
        'child': 'img',
        'change': 'src',
        'formatValue': function (value) { 
            return 'test/images/' + value + '.jpg'
        }
    });
});

But with no luck.

Kind regards,

Maurice

Answer 1

Try –

$(document).ready(function() {
    $(".minus").one("click", function(){
        var value = parseInt($("#sum").val());
        value = value - 1;
        $("#sum").val(value);
        $("#img_select > img").attr("src","test/images/" + value + ".jpg")
    });
});

That should just concatenate your field value into the image string and insert it into the src attribut` of your image. You’ll probably also need to add some code to prevent your value going below 1.