Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Oop beginner problem

    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 = [100200300400500600];
    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 
    0btnArray[i] == "id"i++ )    
                $(
    "#lift").animate({topmyHeight[i] ,width"+=0",opacity:0.4},"slow");
            });        
    }); 

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    If you’re using jQuery already then make use of its full potential; use the each() function.
    Something like
    PHP Code:
    var myHeight = [100200300400500600];
    $(
    '.lift_btn').each(function(i) {
      $(
    this).click(function() {
        $(
    "#lift").animate({topmyHeight[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.
    Last edited by VIPStephan; 09-14-2012 at 12:33 PM. Reason: added "+'px'" unit for height value

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    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);
     }
    });
    1. Your for loop was using comma separation, not semi-colon.
    2. The second argument in a for loop should be the duration (e.g. while i is something).
    3. I added the floor variable, and parsed it into an integer, so that the for loop had a target for the second argument.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    I just noticed that probably a unit (“px”) should be added to the height value. I’ve edited my previous post.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •