Javascript 在这个问题上，使用jQuery选择器的最佳方法是什么？

我真的不知道这部电影的最佳标题是什么。基本上，在我的页面上有一个下拉菜单，它是由jQuery（.slide）实现的。下拉列表显示在页面的顶部和底部，因此用户更容易向下滚动，并且仍然可以使用下拉菜单。我使用rail partial来显示这个页面，这样我可以很容易地重构它

问题是，由于两个下拉菜单位于同一页面中，因此它们不能具有相同的ID，但它们具有相同的功能，当用户单击时，将打开并显示其他选项。让他们使用相同逻辑但不同id和尽可能少的代码的最佳方式是什么

我不想做这样的事

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

给出相同的类和不同的ID，然后使用如下内容： 假设类名为

export\u record

。您可以为每个菜单指定不同的ID，并检查单击了哪个元素

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

几点意见：

• 您可以将id与一起使用，您将有如下内容：

  $（“#sub1，#sub2”）.hide（）
  
  $（“#sub#u export1，#sub#u export2”）。单击（）…
  

• 你不能使用多个

  click

  函数，你必须将所有函数合并到click-one[Edit]中。正如Felix指出的那样，我错了

问候,

Max

您可以这样做：

    $('.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，而只有一个javascript代码。

---

希望这有帮助。Cheers

只需将相同的事件处理程序连接到这两个元素。使用父ID直接寻址每个对象，以便连接事件处理程序。在本例中，我假设顶部菜单包含在id为header的div中，底部div包含id为footer的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();
  }
}

---

不需要识别元素。为他们提供相同的类（正如您在代码段中已经提供的）：

---

我们也需要HTML结构。这些元素是如何关联的？顺便说一句，您没有使用ID，您已经在使用类。您不能使用多个单击函数，这是什么意思？无法绑定多个

单击
事件处理程序？这是可能的。对不起，我的错误，我会更正我的帖子，以免留下这个错误的部分
$('#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();
  }
}

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