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
Post a Comment