Home/ Questions/Q 105099
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T01:23:09+00:00

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js></script> <script type=text/javascript> function bigtosmalltriangle() { $(this).siblings(div.break).removeClass(‘triangle3’).addClass(‘triangle1’); setTimeout ( smalltomediumtriangle(), 400 ); }

  • 0
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js'></script> <script type='text/javascript'>          function bigtosmalltriangle() {             $(this).siblings('div.break').removeClass('triangle3').addClass('triangle1');             setTimeout ( 'smalltomediumtriangle()', 400 );         }         function smalltomediumtriangle() {             $(this).siblings('div.break').removeClass('triangle1').addClass('triangle2');             setTimeout ( 'mediumtobigtriangle()', 400 );         }         function mediumtobigtriangle() {             $(this).siblings('div.break').removeClass('triangle2').addClass('triangle3');             setTimeout ( 'bigtosmalltriangle()', 400 );         }      $(function() {         $('span#clickhere').click(             function() {                 /* do a lot stuff here */ bigtosmalltriangle();                 $(this).hide();             }         );     }); </script>  <style type='text/css'>     .triangle1 {background:#000;}     .triangle2 {background:red;}     .triangle3 {background:white;} </style> 

<div><div class='break'>Hello World</div><span id='clickhere'>asdf</span></div>

I’m trying to get get the div.break to scroll through 3 bgcolors, but when I click on the span it has no effect. Does anyone know what I should do?

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. The problem is that ‘this’ is not bound to the span you clicked on in the bigtosmalltriangle, smalltomediumtriangle, and mediumtobigtriangle functions. You need to either pass in the element as a parameter, or set a variable that’s in scope in all the functions through closures.

    Parameter passing:

    function bigtosmalltriangle(elements) {     elements.removeClass('triangle3').addClass('triangle1');     setTimeout(function() { smalltomediumtriangle(elements); }, 400); } function smalltomediumtriangle(elements) {     elements.removeClass('triangle1').addClass('triangle2');     setTimeout(function() { mediumtobigtriangle(elements); }, 400); } function mediumtobigtriangle(elements) {     elements.removeClass('triangle2').addClass('triangle3');     setTimeout(function() { bigtosmalltriangle(elements); }, 400); }  $(function() {     $('span#clickhere').click(         function() {             /* do a lot stuff here */             bigtosmalltriangle($(this).siblings('div.break'));             $(this).hide();         }     ); });

    Closures:

    $(function() {     $('span#clickhere').click(         function() {             var elements = $(this).siblings('div.break');              function bigtosmalltriangle() {                 elements.removeClass('triangle3').addClass('triangle1');                 setTimeout(smalltomediumtriangle, 400);             }             function smalltomediumtriangle() {                 elements.removeClass('triangle1').addClass('triangle2');                 setTimeout(mediumtobigtriangle, 400);             }             function mediumtobigtriangle() {                 elements.removeClass('triangle2').addClass('triangle3');                 setTimeout(bigtosmalltriangle, 400);             }              /* do a lot stuff here */             bigtosmalltriangle();             $(this).hide();         }     ); });
    • 0