How to get the div behind the div i clicked

Question

Please take a look here at what I'm trying to achieve: http://jsfiddle.net/3m6r7ud2/4/

I have the following html page that looks like this:

<div class="page_conatiner" id="page1">
    <img src=$file1>
<div class="page_conatiner" id="page2">
    <img src=$file2>
<div class="page_conatiner" id="page3">
    <img src=$file3>

And so on.

I also have a fixed button that shows up on hover:

    <div class="rotate_button" id="rotate_left" ></div>
    <div class="rotate_button" id="rotate_right" ></div>

This is the jQuery I'm using:

$(document).on("click", ".rotate_button", function(){
    var direction = $(this).attr("id");
    var page_num = ?
    rotate_file(page_num,direction)
})

The buttons are in fixed locations on the page, and show on hover. When clicking on this button, I want to get which div was behind that div while clicking so I could know which of the pages I need to rotate.

How can I do this?

Answer 1

First, I'm not certain what animation you are going for, but there might be a jQuery widget that will do what you want out of the box. Idk. The bootstrap one is handy, but maybe all of bootstrap is more than you want: http://getbootstrap.com/javascript/#carousel .

To answer your question: I would set a variable somewhere that keeps track of the current page num. Set it to 0 (or 1 if that's the first page number) when the page loads, and then in your click handler, increment it by 1. And then make sure to reset it to 0 (or 1) again when it gets high enough to start over. Does that answer your question?