Question

My plan is to have lots of boxes (an undefined amount). When show box is clicked under a box, it shows that particular box.

I have some unique divs in my html. The div is made unique by:

<div id="box-<%=box.id%>"></div>

In my application.js, I have

$('.show-box > a').click(function(){
$('#box').show();
});

I obviously need to have the box-id in the $('#box').show(); part but I’m unsure how to do that…

EDIT: adding more information

<div class="show-box">
  <a href="javascript:void(0)">Show</a>
</div>

<div class="box" id="box-<%= box.id  %>"></div>

The class is for styling.

Just to add, I know that the javascript link should link to an actual link. I’ll fix that later.

Answer 1

You would use this inside the handler to refer to the specific .show-box > a that was clicked.

So it depends on what the relationship is between that and the box element you want to display.

When you say under, if that means that it is a sibling to the .show-box element, you can use .parent() to traverse up from the <a>, then use .prev() to traverse back to the box.

$('.show-box > a').click(function() {
      // "this" refers to the <a> that was clicked.
    $(this).parent().prev().show();
});

Ultimately, the correct solution depends on your actual HTML markup. If you provide that in your question, it would be helpful.

You could select by ID if you want, but it is often not necessary.