1

I'm working on something complex (for my standards at least) in jQuery and am completely stuck on how to move forward. I more or less see the structure in my head but having difficulties writing it down into properly working jQuery code:

  • When clicking next or previous, the next or previous column should be highlighted, this works fine.
  • Once you are at the last column (R6) and click next one new element should appear (R7) and R1 should be removed. R7 and further cols are already in the html, but are made invisible with CSS. How can I make R7 appear and R1 disappear and so on?

The invisble tables are already in the html code, you can see it in the top right table with the race description once you click further then R6, it will continue to R7 up to R12.

The logic I have in my mind is something like this:

  • When user arrives at last visible R and clicks next, add class 'invisible' to the R on the left and add class 'visible' to R on the right. T
  • When user clicks previous the opposite of above should happen.

The tricky part is to get the next Rn appear once it is at the last one..

Thanks for looking into my code: http://jsfiddle.net/yunowork/hVHZb/

4

1 回答 1

0

Here is an update of your fiddle that works as you like.

This is the code I added to show the new column and hide the previous:

    if ($nextCol.hasClass("invisible")) {
        $nextCol.removeClass("invisible");        
        $nextCol.addClass("visible");
        var $toRem = $nextCol.prev('td').prev('td').prev('td').prev('td').prev('td').prev('td');
        $toRem.removeClass("visible");
        $toRem.addClass("invisible");
    }

There is analogous code for previous. I also made the colspan of the header column 12 so that the extra columns also fell within its grasp.

The only "ugly" part of the code is how to find which column to remove. I just decided to backtrack 6 columns and hide that one. Ideally you'd want to abstract that functionality out and make it more flexible.

EDIT: Updated fiddle with fixed prev bug. I added this in the if statement: if($prevCol.length != 0 && $prevCol.index() >= 8). I'm not sure why 8 is the number (I would think it should be 2) but it seems to go in multiples of 4.

于 2012-09-07T17:41:01.557 回答