要将jQuery代码分解为函数，您是否采用了与JavaScript相同的方法？
要将jQuery代码分解为函数，您是否采用了与JavaScript相同的方法？
提问于 2009-07-10 23:06:30
我一直在编写一些包含JavaScript变量和循环等内容的jQuery函数--它们变得冗长且难以阅读。如果我想拆散他们，我该怎么做呢？
$(".x").click(function ()
{
var i=0;
for (i=0;i<50;i++)
{
if ($("#x"+i).is(':hidden'))
{
$("#x"+i).show();
}
else
{
$("#x"+i).hide();
}
}
});例如，在上面的代码中，如果我想要将循环的内容移动到一个单独的函数，然后从循环内部调用该函数，那么这需要是什么样子的？
回答 3
Stack Overflow用户
回答已采纳
发布于 2009-07-10 23:40:18
没有"jQuery函数“这样的东西，jQuery代码通常只是使用匿名的JavaScript函数。
要将循环的内容移动到命名函数中，应如下所示：
$(".x").click( function() {
for (var i=0; i<50; i++) toggleItem(i)
});
function toggleItem(i) {
if ($("#x"+i).is(':hidden')) {
$("#x"+i).show();
} else {
$("#x"+i).hide();
}
}但是，您可以使用CSS的级联属性通过一个简单的JavaScript语句来切换所有项，而不是遍历所有元素。示例：
CSS：
<style type="text/css">
.StateOne .InitiallyHidden { display: none; }
.StateTwo .InitiallyVisible { display: none; }
</style>HTML：
<div class="StateOne" id="StateContainer">
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
</div>JavaScript：
$('.x').click(function() {
var s = document.getElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
});Stack Overflow用户
发布于 2009-07-10 23:08:41
jQuery是JavaScript，所以你可以像往常一样传递函数。
// First refactor - separate the function out
$(".x").click(myfunc);
function myfunc() {
{
var i=0;
for (i=0;i<50;i++)
{
if ($("#x"+i).is(':hidden'))
{
$("#x"+i).show();
}
else
{
$("#x"+i).hide();
}
}
}尽管查看您的代码，它还是强烈要求所有从x1到x50的元素都应用相同的类。像这样..。
<div id='x1' class='xClass'></div>
<div id='x2' class='xClass'></div>
<div id='x3' class='xClass'></div>
.....
<div id='x50' class='xClass'></div>然后你可以做类似这样的事情
var currentHidden = $('.xClass:hidden')
var currentVisible = $('.xClass:visible')
currentHidden.show();
currentVisible.show();是的，toggle更好：
$('.xClass').toggle();这样就不需要循环了，这是使用jQuery的好处之一！=)
Stack Overflow用户
发布于 2009-07-10 23:12:33
jQuery函数和JavaScript函数之间的区别是不存在的，因为jQuery实际上是JavaScript。
$(".x").click(DoTheThingYouDo);
function DoTheThingYouDo()
{
var i=0;
for (i=0;i<50;i++)
{
$("#x"+i).toggle();
}
}您可以使用toggle()调用来显示和隐藏...从理论上讲，您还可以使用CSS类，只需切换包含该类的所有DOM元素：
$(".x").click(DoTheThingYouDo);
function DoTheThingYouDo()
{
$(".myclass").toggle();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1112384
复制相关文章
相似问题
腾讯云开发者
