Question

This is basically a menu that doesn’t refresh the page. I am attempting to only have one image active at a time, and am having issues deselecting the previously selected menu options. That is to say this is acting more as a check-box rather than a radio-box.

$(function(){
    $(".img-swap").live('click', function() {
        if ($(this).attr("class") == "img-swap") {
            this.src = this.src.replace("_off","_on");
        } else {
            this.src = this.src.replace("_on","_off");
        }
    });
});

Here is the code the jQuery is attempting to modify

<div id="feedback-topic.buttons">
    <a href="#bug"><img src="lib/feedback-bug_off.jpg" alt="bug" width="75" height="49" border="0" class="img-swap" /></a>
    <a href="#content"><img src="lib/feedback-site_content_off.jpg" alt="bug" width="121" height="49" border="0" class="img-swap" /></a>
    <a href="#suggestion"><img src="lib/feedback-suggestion_off.jpg" alt="bug" width="117" height="49" border="0" class="img-swap" /></a>
</div>

But I can’t figure out for the life of me how to deselect (change the src.replace) on all buttons excluding the option that was just clicked.

Also any idea how to go about passing which option was selected to the next page when the form all of this is inside is submitted? I suppose I should have an invisible form that changes based on what was selected or is there an easier means to accomplish this?

Answer 1

Notwithstanding your stuff about form submission, the way to toggle everything except this is to use .not(this), or $(this).siblings() if all of the matching elements are actually siblings of this:

this.src = this.src.replace('_off', '_on');

$('.img-swap').not(this).attr('src', function(index, attr) {
    return attr.replace('_on', '_off');
});

This uses the callback version of .attr() to modify the src attribute of the matching elements in place.

Working demo at http://jsfiddle.net/alnitak/6a28q