Каков наилучший способ использовать селектор jQuery в этой проблеме?

Question

Я действительно не знаю, что будет лучшим названием для этого.По сути, на моей странице есть выпадающее меню, которое реализовано с помощью jQuery (.slide).Раскрывающийся список отображается в верхней и нижней части страницы, поэтому пользователю проще прокрутить вниз и по-прежнему использовать раскрывающееся меню.Для отображения этой страницы я использую частичную направляющую, так что я могу довольно просто ее рефакторизовать.

Проблема в том, что два выпадающих меню находятся на одной странице, поэтому они не могут иметь одинаковый идентификатор, ноони имеют ту же функциональность, когда пользователь нажимает, затем открывается и показывает другие параметры.Каков наилучший способ позволить им использовать ту же логику, но разные идентификаторы и меньше кода, насколько это возможно.

Я не хочу делать что-то подобное.

        $('.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();
            }
        });

А потом второй

        $('.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();
            }
        });

Большое спасибо.:)

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

Нет необходимости определять элементы. Дайте им тот же класс (как у вас уже есть во фрагменте):

$('.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

Просто подключите одинаковые обработчики событий к обоим элементам.Используйте родительские идентификаторы, чтобы напрямую обращаться к каждому объекту в целях подключения обработчиков событий.В целях этой иллюстрации я просто предположил, что верхнее меню содержится внутри div с идентификатором заголовка, а нижнее div с идентификатором нижнего колонтитула, но вы можете использовать любой селектор CSS, который уникально нацелен на каждый из них.

$('#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();
  }
}

Answer 3

Несколько комментариев:

• вы можете использовать идентификатор с несколькими селекторами , у вас будет что-то вроде:

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

• вы не можете использовать несколько функций click, вам придется объединить все свои функции в один клик [Редактировать] Я был не прав, как Феликс указал

С уважением,

Макс

Answer 4

Вы можете сделать это:

    $('.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();            
    });

С этим вы можете иметь одинаковый HTML для обоих виджетов и только 1 код JavaScript.Надеюсь это поможет.Приветствия

Answer 5

Дайте тот же класс и другой идентификатор, а затем используйте что-то вроде этого: Предположим, имя класса export_record.Вы можете присвоить разные идентификаторы каждому меню и проверить, по какому элементу щелкнули.

$('.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. */
  }
});