如何优化jQuery的这一点？

我正在寻找一种方法来缩短我放在一起的这段代码。如何优化jQuery的这一点？

我有几个基本的用户界面元素，点击后，向下滑动显示更多信息。

正如我现在写的，每个元素都有它自己的p id和id。

有没有办法将点击的id传递给正在运行的函数，所以我不必手动编写10+个元素？

 $(document).ready(function() { 
     //hides info paragraph as soon as the DOM is ready (before the page loads) 
     $('div.info > p').hide(); 

     // Toggles the slickbox on click 
     $('#infoToggle').click(function() { 
      $('#info').slideToggle(400); 
      return false; 
     }); 
     $('#moreToggle').click(function() { 
      $('#more').slideToggle(400); 
      return false; 
     }); 
    });

所以不是“moreToggle”和跑“XToggle”，其中X =链接的ID“infoToggle”我只想有一个匿名函数的点击？

来源

2011-05-26 StackOverflow

欢迎来到StackOverflow StackOverflow！ – Shaz 2011-05-26 19:47:50

你可以做这样的事情：

$.each(['info', 'more', 'x'], function(i, value) { 
    $('#' + value + 'Toggle').click(function() { 
     $('#' + value).slideToggle(400); 
     return false; 
    }); 
});

最好的，最灵活的解决方案，但是，这是构建您的标记的方式，你可以利用DOM关系找到相关的元素。

来源

2011-05-26 19:45:13 lonesomeday

只需添加你需要选择的所有ID和点击功能使用this：

$('#infoToggle, #moreToggle').click(function() { 
    $('#' + this.id.replace('Toggle','')).slideToggle(400); 
    return false; 
});

来源

2011-05-26 19:45:47 mVChr

这完美的作品！只是所以我明白this.id.replace从点击操作拉动“信息”或“更多”？ – StackOverflow 2011-05-26 20:00:24

'this.id'拉取被点击的元素的id，即'infoToggle'或'moreToggle'，所以我使用'replace'去掉切换部分，这样你就可以'滑动切换''＃info'或'#more ' – mVChr 2011-05-26 20:13:29

使用$('#'+(this).id+'Toggle').slideToggle(400)

来源

2011-05-26 19:45:56 diEcho

$('.someClass').click(function() { 
     $('#' + $(this).attr('id').replace('Toggle','')).slideToggle(400); 
     return false; 
    });

这将需要被点击项目的ID，并删除他切换部分以提供目标ID。

每当我做这个我总是一致的HTML做到了，所以我会做这样的事情

<div class='header'>MyTitle</div> 
<div class='content'>blah</div> 

$('.header').click(function() { 
      $(this).next().slideToggle(400); 
      return false; 
     });

来源

2011-05-26 19:46:01

你可以把IDS中的数组，然后用each遍历，像以下内容：

$.each(['info', 'more'], function (idx, val) { 
    $('#' + val + 'Toggle').click(function() { 
     $('#' + val).slideToggle(400); 
     return false; 
    }); 
});

更好的解决方案，虽然，在我看来可能是使用children如果你的HTML西装。

来源

2011-05-26 19:46:04 Nick

如果我正确理解你的问题，你需要一堆运行.slideToggle的点击处理程序。如果这是真的，你想要类似下面的东西（使用多个选择器绑定到一个单击处理程序）：

$('#infoToggle, #moreToggle').click(function() { 
    $('#' + $(this).attr('id').replace('Toggle','')).slideToggle(400); 
    return false; 
});

来源

2011-05-26 19:52:02 ScottD

'+'）.slideToggle（400）;'should be'）.slideToggle（400）;' – 2011-05-26 19:59:33

是的，很好的接收。编辑以反映错误。 – ScottD 2011-05-26 20:08:30

如何优化jQuery的这一点？

回答

相关问题