What is the best way to user jQuery selector at this problem?

Question

I really don't know what would be the best title for this. Basically, on my page I have a dropdown menu which is implemented by jQuery (.slide). The dropdown appear in both at the top and bottom of the page, so it's easier for user to scroll down and can still use the dropdown menu. The page to display this I use rail partial so that I can refactor it quite easy.

The problem is, since the two dropdown menus are in the same page, so they can't not have the same ID but they have the same functionality, when the user click then opens up and show other options. What is the best way to let them use the same logic but different id and less code as possible.

I don't want to do something like this.

        $('.sub_export_record1').hide();

        $('.export_record_link1').click( function(e) {
            e.preventDefault();
        });

        $('.export_record1').click( function(e) {

            if ( $(".sub_export_record1").is(":hidden") )
            {
                $('.sub_export_record1').slideDown("slow");
            }
            else
            {
                $('.sub_export_record1').hide();
            }
        });

And then the second one

        $('.sub_export_record2').hide();

        $('.export_record_link2').click( function(e) {
            e.preventDefault();
        });

        $('.export_record2').click( function(e) {

            if ( $(".sub_export_record2").is(":hidden") )
            {
                $('.sub_export_record2').slideDown("slow");
            }
            else
            {
                $('.sub_export_record2').hide();
            }
        });

Thanks a lot. :)

HTML

<ul>
<li class="export_record">
    <%= link_to "Export this Record"%>
    <ul class="sub_export_record">
        <li><%= link_to "Export to Photo Wall"%></li>
        <li><%= link_to "Export to PDF"%></li>
        <li><%= link_to "Export to CSV"%></li>
    </ul>
</li>
</ul>

Answer 1

There is no need to identify the elements. Give them the same class (as you already have in the snippet):

$('.sub_export_record').hide();

$('.export_record').click( function(event) {
    event.preventDefault();

    var $sub = $(this).children(".sub_export_record");       
    if ( $sub.is(":hidden") ) {
        $sub.slideDown("slow");
    }
    else {
        $sub.hide();
    }
});

Answer 2

Give same class and different ID and then use something like this: Suppose the class name is export_record . You can give different ID to each menu and check which element is clicked.

$('.export_record').click( function(e) {
  e.preventDefault();
  $('.export_record').hide();
  $(this).slideDown("slow");
  if($(this).attr("id") == "THE_ID_YOU_GAVE_TO_ELEMENT"){
      /* Do operation for that specific element. */
  }
});

Answer 3

Several comments:

• you could use id with multiple selectors , you would have something like:

  $("#sub1, #sub2").hide();
$("#sub_export1, #sub_export2").click()...

• you cannot use multiple click functions, you will have to merge all your functions into the click one [Edit] i was wrong as Felix pointed out

Regards,

Max

Answer 4

You could do this:

    $('.sub_export_record').hide();
    $('.export_record_link').click( function(e) {
        e.preventDefault();
    });
    $('.export_record').click( function(e) {
        var $sub = $(this).find(".sub_export_record"); //This is the key
        if ($sub.is(":hidden") )            
            $sub.slideDown("slow");            
        else            
            $sub.hide();            
    });

With this, you can have the same html for both widgets and only 1 javascript code. Hope this helps. Cheers

Answer 5

Just hook up the same event handlers to both elements. Use parent IDs to directly address each object for the purposes of hooking up the event handlers. For purposes of this illustration, I just assumed that the top menu is contained inside a div with an id of header and the bottom div with in id of footer, but you can use any CSS selector that uniquely targets each one.

$('#header .sub_export_record').click(handleExportClick);
$('#footer .sub_export_record').click(handleExportClick);

function handleExportClick() {
  var $obj = $(this);
  if ($obj.is(":hidden")) {
    $obj.slideDown("slow");
  } else {
    $obj.hide();
  }
}