jquery and javascript toggle image tags between classes -
i can not seem right. please help. code supposed toggle class of img tag when user clicks on div.
here html
<li><img src="img/gallery/val_day.jpg" id="img27" style="width: 100%;" alt="val_day" /></li> </ul> </div> <p id="previouslink" href="#">«</p> <p id="nextlink" href="#">»</p> </div> and here jquery , javascript.
$(document).ready(function () { var gallery = { li: [''], picnum: 0, nextpic: function () { $('#nextlink').click(function () { var $activeimg = "'#img" + gallery.picnum + "'"; $($activeimg).toggleclass('activepic'); gallery.picnum++; $activeimg = "'#img" + gallery.picnum + "'"; $($activeimg).toggleclass('activepic'); }); } } });
the problems see how jquery selectors looking images.
remove apostrophes. example, change var $activeimg = "'#img" + gallery.picnum + "'"; to:
var $activeimg = "#img" + gallery.picnum.tostring(); the same thing should done second $activeimg.
my other comment on convention. convention, in experience, variable representing jquery object should prefixed $. $activeimg doesn't seem jquery object. it's string. use activeimageselector instead (a suggestion).
updated js
$(document).ready(function () { var gallery = { li: [''], picnum: 0, nextpic: function () { $('#nextlink').click(function () { var activeimageselector = "#img" + gallery.picnum.tostring(); $(activeimageselector ).toggleclass('activepic'); gallery.picnum++; activeimageselector = "#img" + gallery.picnum.tostring(); $(activeimageselector ).toggleclass('activepic'); }); } } });
Comments
Post a Comment