Question

I am essentially brand new to coding (html5 forms, CSS3 and now jQuery).

What I am trying to do is have an imageswap (which I have done) attached to a radio button. So what I’m doing is replacing the buttons with images, each with a “pressed” version. However, before even attaching it to a form function/radio button input, I want to find a way so that when I click one button, it switches the other images back to “un-pressed”. Essentially so that only one image can be “pressed” at a time.

Right now the code for me pressed images are

    $(function() {
        $(".img-swap1").live('click', function() {
            if ($(this).attr("class") == "img-swap1") {
                this.src = this.src.replace("_U", "_C");
                } else {
                    this.src = this.src.replace("_C","_U");
                }
            $(this).toggleClass("on");
        });

        });

I thought about using an if statement to revert all the “_C” (clicked) back to “_U” (unclicked).

Hopefully I’ve included enough information.

Answer 1

A good pattern for solving this problem is to apply the unclicked state to ALL your elements, then immediately afterward apply the clicked state to the targeted element.

Also, your if statement ($(this).attr("class") == "img-swap1") is redundant — it will always be true because it’s the same as the original selector $(".img-swap1").live('click'...

Try

$(function() {
  $(".img-swap1").live('click', function() {
    $(".img-swap1").removeClass('on').each(function(){
      this.src = this.src.replace("_U", "_C");
    });
    this.src = this.src.replace("_C","_U");
    $(this).addClass("on");
  });
});