CODEWITHSUNDEEP
javascript
Kay
Kay

Reputation: 105

Replace ending on multiple img src

I have 10 buttons each with a different image and text. I have each button to click on/off and if another button is clicked I want the active button to turn off. I am struggling with the latter.

var x = 300;

//port1
    $('#port1').click(
    function(){
        var src = $('.image', this).attr('src');
        //var srcs = $(this).attr('src');
        if($(this).hasClass("highlight")) {  
            $('.butt').removeClass('highlight');
            $('.image', this).attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));
            $('.p1').fadeOut(x);
        }
        else{
            $('.butt').removeClass('highlight');
        //  $('.butt').attr('src').replace('_dark.png', '_light.png');
            $('.butt img').each(function() {
                var src2 = $('.image').attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1');
                $('.image').attr('src', src2);
            });
            $('.talk').fadeOut(x);
            $(this).addClass('highlight');
            $('.image', this).attr('src', src.replace(/_light(\.[^.]+)?$/, '_dark$1'));
            $('.p0').fadeOut(x);
            $('.p1').fadeIn(x);
     }  
});

The problem I am running into is that when I click the button, it changes the src on all the other buttons to be exactly the same as this one and does not just change the ending on the other sources to '_dark'. I thought adding this 'each' function would help and it did not.

Edit: I am new to coding but i attempted a jsfiddle: http://jsfiddle.net/messedUP90/yxjoxe41/ The random computers that appear was the effect I am going for and the code I wrote to do it before I remembered that each icon was going to be different. Look at the first button titled "un" for where the error I am talking about happens.

Upvotes: 1

Views: 132

Answers (2)

Frank
Frank

Reputation: 26

http://jsfiddle.net/gtf1dk0m/1/

You need to re-set the variable src.

This code does it: 

$('.butt').each( function( index ) {
    if ( $(this).attr('src') ) {
        $(this).attr('src', $(this).attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1'));
    } 
});

ignore the fact that the image does not change color in the jsfiddle. it works in dreamweaver. :)

Upvotes: 1

GoreDefex
GoreDefex

Reputation: 1531

There is some strange code and naming conventions in this function... such as var src = $('.image', this).attr('src');... theres a lot unexplained by the question asked here and with no jsfiddle it's hard to imagine what you mean or see what HTML elements you're using...

so I will try to answer based on purely your description and not your code.

If you want to remove all instances of a class such as an active class you could simply do an each function however your later comments about it changing all other image sources once clicked is in this line $('.image').attr('src', src2);. You have effectively targeted all images under the class .butt which seems to be all of your images. Perhaps what you want is actually to iterate over all elements and remove the active state such as...

$(".butt img").each(function() {
    //Remove Active Classes
    if($(this).hasClass("activeImage")) {
        $(this).removeClass("activeImage");
    }
});

Then you are now free to take the clicked button and add its active state in...

$(".buttons").each(function() {
    $(this).click(function() {
        //Old Code
        $(".butt img").each(function() {
            //Remove Active Classes
            if($(this).hasClass("activeImage")) {
                $(this).removeClass("activeImage");
            }
        });
        //New Code
        $(this).addClass("activeImage");
    });
});

Then in your CSS you could make sure that you have a rule like

.activeImage {
    background-image: url("blah.png") !important;
    /* You Get The Idea */
}

Upvotes: 1

Related Questions