Oop beginner problem

MarcoA · 09-14-2012, 10:32 AM

Hey,

I am trying to make a lift where every button is object of a button class.
Now i want to call the specific button in my for loop when a button is pressed.
I am using an associative array.
I know how to get the button id, but i have no idea how to use it in my for loop.
Sorry if this is a stupid question, tried searching but probably used the wrong words.

This is my html.

PHP Code:


			
<body>

    <button id="btn0" class="lift_btn">0</button>

    <button id="btn1" class="lift_btn">1</button>

    <button id="btn2" class="lift_btn">2</button>

    <button id="btn3" class="lift_btn">3</button>

    <button id="btn4" class="lift_btn">4</button>

    <button id="btn5" class="lift_btn">5</button>

    <div id="lift" style="position: absolute; top:200px; left:0px; background:#98bf21;height:150px;width:100px;"></div>

        

</body>

This is my js:

PHP Code:


			
var myHeight = [100, 200, 300, 400, 500, 600];

var btnArray = new Array();



btnArray["btn0"] ="0";

btnArray["btn1"] ="1";

btnArray["btn2"] ="2";

btnArray["btn3"] ="3";

btnArray["btn4"] ="4";

btnArray["btn5"] ="5";

btnArray["btn6"] ="6";





$(document).ready(function() {



    console.log('test');



    $(".lift_btn").click(function(){

            console.log(this);

            console.log( $(this).attr("id") );

        for (var i = 0, btnArray[i] == "id", i++ )    

            $("#lift").animate({top: myHeight[i] ,width: "+=0",opacity:0.4},"slow");

        });        

});

VIPStephan · 09-14-2012, 10:43 AM

If you’re using jQuery already then make use of its full potential; use the each() function.
Something like

PHP Code:


			
var myHeight = [100, 200, 300, 400, 500, 600];
$('.lift_btn').each(function(i) {
  $(this).click(function() {
    $("#lift").animate({top: myHeight[i]+'px',opacity:0.4},"slow"); 
  });
});

(untested)

I have no idea what the purpose of width: "+=0" is since it just adds nothing to itself so I left it out.

shadowsilver03 · 09-14-2012, 11:04 AM

Stephan's solution works (just tested it myself), just replace the

Code:

$(".lift_btn").click(function(){

function with it.

As for why your original code did not work, here is a version that does

Code:

$(".lift_btn").click(function(){ 
 console.log(this); 
 console.log( $(this).attr("id") ); 
 var floor = parseInt(btnArray[$(this).attr("id")]);
 for (var i = 0; i <= floor; i++ ){    
  $("#lift").animate({top: myHeight[i] ,width: "+=0",opacity:0.4},"slow"); 
  console.log("Floor: " + i);
 }
});

Your for loop was using comma separation, not semi-colon.
The second argument in a for loop should be the duration (e.g. while i is something).
I added the floor variable, and parsed it into an integer, so that the for loop had a target for the second argument.

VIPStephan · 09-14-2012, 12:33 PM

I just noticed that probably a unit (“px”) should be added to the height value. I’ve edited my previous post.