Tuesday, 15 July 2014

How to Cycle Through a Series on ICON Buttons via jQuery click() Function -



How to Cycle Through a Series on ICON Buttons via jQuery click() Function -

i have grid of 20 rows , 10 columns.

in each cell intersection want able click icon image have displayed , able cycle through series of 3 graphics image icons on each click, without there beingness end necessarily. in other words, cycle can go on on long click. there 120 instances on presence of icon buttons.

here snippit of html:

<td class="rights"><img src="../images/button1.png" alt="first of 3 icons" class="button" /></td>

the corresponding css insignificant scenario.

here snippit of jquery:

// jquery functions $(document).ready(function() { // toggle icons $('img.button').click(function(){ if ($(this).attr('src') == '../images/button1.png') $(this).closest('img.arcbutton').attr('src', '../images/button2.png'); else if ($(this).attr('src') == '../images/button2.png') $(this).closest('img.arcbutton').attr('src', '../images/button3.png'); else if ($(this).attr('src') == '../images/button3.png') $(this).closest('img.arcbutton').attr('src', '../images/button1.png'); }); // end toggle icons }) // end jquery functions

my icons button1.png, button2.png, , button3.png

thanks helping

here's jquery solution can with, tested, , got work.

if ($(this).attr('src') == '../images/button1.png') $(this).closest('img.arcbutton').attr('src', '../images/button2.png'); else if ($(this).attr('src') == '../images/button2.png') $(this).closest('img.arcbutton').attr('src', '../images/button3.png'); else if ($(this).attr('src') == '../images/button3.png') $(this).closest('img.arcbutton').attr('src', '../images/button1.png');

jquery click

No comments:

Post a Comment