-1

我已将以下行为添加到一系列 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");
});

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

4

4 回答 4

2

首先,而不是:

$("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,所以我不知道它到底长什么样。

于 2012-07-27T10:28:03.317 回答
1

你可以尝试这样的事情:

$.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");
});
于 2012-07-27T10:23:44.460 回答
1

它的通用代码

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

});
于 2012-07-27T10:39:00.047 回答
0

做这个:

$("div#_FIRST_Menu, div #_SECOND_Menu").click(function () {
...
    $("div#_FIRST_Content, div#_SECOND_Content").toggleClass("property1 property2");
});
于 2012-07-27T10:27:17.310 回答