Question

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

问题是，由于两个下拉菜单位于同一页面中，因此它们不能具有相同的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

<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

给出相同的类和不同的ID然后使用这样的东西：假设班级名称为export_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. */
  }
});

Answer 3

几条评论：

你可以使用multiple selectors的id，你会有类似的东西：

$("#sub1, #sub2").hide();
$("#sub_export1, #sub_export2").click()...
~~你不能使用多个click函数，你必须将所有函数合并到点击一个~~ [编辑]我错了，因为Felix指出

此致

最高

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

将相同的事件处理程序连接到两个元素。使用父ID直接寻址每个对象，以便连接事件处理程序。出于这个例子的目的，我只假设顶部菜单包含在一个id为header的div中，而底部div包含在id的footer中，但你可以使用任何唯一针对每个CSS选择器的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();
  }
}

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

5 个答案: