javascript - 'Replace' changes entire src and not just the ending.. why? -



javascript - 'Replace' changes entire src and not just the ending.. why? -

situation: have 10 grayness divs (each image , text) buttons. want buttons have darker text , darker image when active. when active button clicked want deactivate. want deactivate when button becomes active.

problem: when replace ending on image sources, changes finish source on images same active one... changes other images same icon.

jsfiddle: http://jsfiddle.net/messedup90/gtf1dk0m/

warning: jsfiddle shows problem having other images changing same reason active image not alter color. works fine in dreamweaver not concerned that.

$(document).ready(function(){ var x = 300; $("[id^=pport]").click(function () { var src = $('.butt', this).attr('src'); if($(this).hasclass('highlight')){ $(this).removeclass('highlight'); $('.butt', this).attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1')); } else{ $('.butt').removeclass('highlight'); $('.butt').attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1')); $('.talk').fadeout(x); $(this).addclass('highlight'); $('.butt', this).attr('src', src.replace(/_light(\.[^.]+)?$/, '_dark$1')); } }); });

the problem describe - changing src of every icon src of 1 have clicked, swapping light dark.

i.e. on set var src = $('.butt', this).attr('src');

at no point re-set variable src else.

you $('.butt').attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));

this sets src attribute of elements butt class lite version of clicked icon.

that's problem lies...

instead of trying alter images in 1 go, need loop on total set:

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

fiddle (working same lite / dark limitations yours) here: http://jsfiddle.net/gtf1dk0m/1/

javascript jquery

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -