jquery - 向一系列元素添加类似的 jQuery 行为

Question

我已将以下行为添加到一系列 div 中。

$("div#_FIRST_Menu").click(function () {
  ...
  $("div#_FIRST_Content").toggleClass("property1 property2");
});

$("div#_SECOND_Menu").click(function () {
  ...
  $("div#_SECOND_Content").toggleClass("property1 property2");
});

现在该解决方案按预期工作，我可以释放我对代码卫生的热情。直接的问题，我无法真正看到的答案是如何去做{在此处查看标题}。我想按照这个思路执行一些操作。

$("div#_" + MAGIC_MARKER + "_Menu").click(function () {
  ...
  $("div#" + MAGIC_MARKER+ "Content").toggleClass("property1 property2");
});

这样我就可以整齐地压缩代码，仍然保持可读性。建议？

Answer 1

首先，而不是：

$("div#_FIRST_Menu")

简单地使用：

$("#_FIRST_Menu")

它更简单，更快。

现在，正确的做法是为您要选择的所有 div 添加一个类。例如，如果您有：

<div id="_FIRST_Menu" class=menu> ... </div>
<div id="_FIRST_Content" class=content> ... </div>
<div id="_SECOND_Menu" class=menu> ... </div>
<div id="_SECOND_Content" class=content> ... </div>

那么你可以使用这个：

$("div.menu").click(function () {
    ...
});

在该函数中，您可以使用例如：

    $(this).next().toggleClass("property1 property2");

获取下一个兄弟，或其他一些函数来找到正确的元素。你没有显示你的 HTML，所以我不知道它到底长什么样。

Answer 2

你可以尝试这样的事情：

$.each( ["FIRST","SECOND","THIRD","ETC..."], function(i,MAGIC_MARKER){
    $("div#_" + MAGIC_MARKER + "_Menu").click(function () {
         ...
        $("div#" + MAGIC_MARKER+ "Content").toggleClass("property1 property2");
    });         
});

或者，您可以通过以下方式使用类，而不是使用"#_" + MAGIC_MARKER + "_Menu"和"#" + MAGIC_MARKER+ "Content"ids：

$("div.class-for-magic-markers-menu").data('index',function(i){  return i; })
                                     .click(function(){
     $("div.class-for-magic-markers-content").eq($(this).data('index'))
                                             .toggleClass("property1 property2");
});

Answer 3

它的通用代码

$("div").click(function () {
  var id = $(this).attr('id');

  var pairs = id.split('_');

  if ( pairs[2] == 'Menu'){
   var marker = 'div#_'+pairs[1]+'_Content';
   $(marker).toggleClass("property1 property2");      
  }

});

Answer 4

做这个：

$("div#_FIRST_Menu, div #_SECOND_Menu").click(function () {
...
    $("div#_FIRST_Content, div#_SECOND_Content").toggleClass("property1 property2");
});