chaining jquery within a form element

I am trying to change images and their links based on a selected option from a drop down menu. I am VERY new to jQuery, however have done quite a bit of reading and watching of videos. My confusion is that there are multiple ways to accomplish the same thing, and I am not sure if i am using up to date code or not.

I currently have :

<select onchange="$('.imageToSwap').attr('src', this.options[this.selectedIndex].value) .$('.linkToSwap').attr('href', this.options[this.selectedIndex].value);" ">

But it does not seem to be working. The images change perfectly! But the link does not change! The link is the same as the image link. Any help would be very much appreciated. Thank you

The above is sorted - thank you

New problem!

OK, I have been working on the next problem for a few hours now, to no avail. I am learning - so that's good!

Here is my issue. I am using a Image Zoom + Thumbnails plugin for jQuery. There is a main image identified as img#zoom-primary and below this there are thumbnails (clicking on them changes the main image) these can be identified by the class .imageToSwap

I have a dropdown list of options (in a form) for a particular product and want to change the main image and the corresponding thumbnails depending in the option chosen (eg colour). That way the product images change with the colour option.

There are 8 images associated with each option. Thus, I want to change the image src and href increasing the image number by 1 each time. EG image-1.png, image-2.png etc.

This is the function that I have come up with - with some help (thank you)!

var currentImageTS = 1;
function updateImageTS() {

$('img#zoom-primary').attr('src', this.options[this.selectedIndex].value + "0.png");


$(".imageToSwap").each (function(index, element) {
    $(element).attr('src', this.options[this.selectedIndex].value + currentImageTS + ".png")
    .attr('http', this.options[this.selectedIndex].value + currentImageTS + ".png");

    currentImageTS++;
    if (currentImageTS > 8) currentImageTS = 1;



})

}

Essentially, when a user selects something from the dropdown menu, the main image needs to change, so too all the thumbnails. The main image only has a img src, whereas the thumbnails have an img src and a a href

The above code has been included in an external javascript file - which is running all sorts of other javascript so it is included and working.

In my form i have the following code to call the function:

<select onchange="$(updateImageTS())" />

But it does not seem to be working!

Any help as to where I am going wrong and what I should try would be gratefully received.

Thank you

Solution

Try:

<select onchange="$('.imageToSwap').attr('src',this.options[this.selectedIndex].value).attr('http',this.options[this.selectedIndex].value);" ">

When you chain jQuery, you do not repeat the $(...), as any method on a jQuery object returns the same jQuery object.

UPDATE - OP's second question

I would highly recommend defining a separate function in a <script></script> block. Then you can keep track of the current iteration using a variable:

var current = 1;
function update() {

    $('.imageToSwap').attr('src', this.options[this.selectedIndex].value + current + ".png")
    .attr('http', this.options[this.selectedIndex].value + current + ".png");

    current++;
    if (current > 4) current = 1;


}