我正在尝试使用变量缩短以下代码(有效)。这似乎很多余,所以是的。
<script type="text/javascript">
$(document).ready(function(){
$("div.first").click(function()
{
if ($('#firsthidden').css('display') == "block")
{
$("#firsthidden").hide("blind", "slow");
$("div.outer").animate({height:200},"slow");
}
else
{
$("#firsthidden").show("blind", "slow");
$("div.outer").animate({height:390},"slow");
}
if ($('#secondhidden').css('display') == "block")
{
$("#secondhidden").hide("blind", "slow");
}
if ($('#thirdhidden').css('display') == "block")
{
$("#thirdhidden").hide("blind", "slow");
}
});
$("div.second").click(function()
{
if ($('#secondhidden').css('display') == "block")
{
$("#secondhidden").hide("blind", "slow");
$("div.outer").animate({height:200},"slow");
}
else
{
$("#secondhidden").show("blind", "slow");
$("div.outer").animate({height:390},"slow");
}
if ($('#firsthidden').css('display') == "block")
{
$("#firsthidden").hide("blind", "slow");
}
if ($('#thirdhidden').css('display') == "block")
{
$("#thirdhidden").hide("blind", "slow");
}
});
$("div.third").click(function()
{
if ($('#thirdhidden').css('display') == "block")
{
$("#thirdhidden").hide("blind", "slow");
$("div.outer").animate({height:200},"slow");
}
else
{
$("#thirdhidden").show("blind", "slow");
$("div.outer").animate({height:390},"slow");
}
if ($('#secondhidden').css('display') == "block")
{
$("#secondhidden").hide("blind", "slow");
}
if ($('#firsthidden').css('display') == "block")
{
$("#firsthidden").hide("blind", "slow");
}
});
});
</script>
所以我试图用变量来缩短它。我有代码逻辑,所以我猜这是一个语法/格式问题。这是我的尝试:
<script type="text/javascript">
var x = null;
var a = null;
var b = null;
$(document).ready(function(){
$("#first").click(function()
{
x = $("#firsthidden");
a = $("#secondhidden");
b = $("#thirdhidden");
});
$("#second").click(function()
{
x = $("#secondhidden");
a = $("#firsthidden");
b = $("#thirdhidden");
});
$("#third").click(function()
{
x = $("#thirdhidden");
a = $("#firsthidden");
b = $("#secondhidden");
});
$("div.clicked").click(function()
{
if (x.css('display') == "block")
{
$(x.hide("blind", "slow");
$("div.outer").animate({height:200},"slow");
}
else
{
x.show("blind", "slow");
$("div.outer").animate({height:390},"slow");
}
if (a.css('display') == "block")
{
a.hide("blind", "slow");
}
if (b.css('display') == "block")
{
b.hide("blind", "slow");
}
});
});
</script>
答案 0 :(得分:2)
您应该能够将所有代码减少到此:
$(document).ready(function() {
var all = $('#firsthidden, #secondhidden, #thirdhidden'),
arr = ['div.first', 'div.second', 'div.third'];
all.each(function(i) {
var this_hidden = this;
$(arr[i]).click(function() {
var the_height = $(this_hidden).css('display') == 'block' ? 200 : 390;
$(this_hidden).toggle("slow", "linear");
$("div.outer").animate({height: the_height },"slow");
all.not(this_hidden).hide("slow", "linear");
});
});
});
缓存'#firsthidden, #secondhidden, #thirdhidden'
all
元素
制作一个获取点击处理程序的选择器数组'div.first', 'div.second', 'div.third'
使用toggle()
[docs]方法显示或隐藏"#...hidden"
元素(this_hidden
),而不是使用if
语句
使用"#...hidden"
代表的this_hidden
元素来确定"div.outer"
只是.hide()
其他两个"#...hidden"
元素没有if
,不包括使用not()
[docs]方法切换的元素。
编辑:替换了动画"div.outer"
的缺失行。感谢@natedavisolds指出它。
编辑2:我hidden
元素的选择器错误。我有$('#firsthidden', '#secondhidden', '#thirdhidden')
而不是$('#firsthidden, #secondhidden, #thirdhidden')
。
另外,我从问题中复制了反转的"blind"
和"slow"
。
固定。
编辑3:我设置the_height
变量太晚了。将它向上移动一行,使其在动画开始之前运行,然后就可以了。
因为没有测试我的代码而感到遗憾!!!
答案 1 :(得分:1)
$("div.clicked").click(function()
{
if (x.css('display') == "block")
{
$(x.hide("blind", "slow");
$("div.outer").animate({height:200},"slow");
}
需要
$("div.clicked").click(function()
{
if (x.css('display') == "block")
{
x.hide("blind", "slow");
$("div.outer").animate({height:200},"slow");
}
答案 2 :(得分:0)
试试这个。
$(document).ready(function(){
$("#first").click(function()
{
MyFunction($("#firsthidden"), $("#secondhidden"), $("#thirdhidden"));
});
$("#second").click(function()
{
MyFunction($("#secondhidden"), $("#firsthidden"), $("#thirdhidden"));
});
$("#third").click(function()
{
MyFunction($("#thirdhidden"), $("#secondhidden"), $("#firsthidden"));
});
function MyFunction(x, a, b)
{
if (x.css('display') == "block")
{
$(x.hide("blind", "slow");
$("div.outer").animate({height:200},"slow");
}
else
{
x.show("blind", "slow");
$("div.outer").animate({height:390},"slow");
}
if (a.css('display') == "block")
{
a.hide("blind", "slow");
}
if (b.css('display') == "block")
{
b.hide("blind", "slow");
}
});
});
答案 3 :(得分:0)
如果您要使用标签内容。有插件或您可以自己编写。可能是这个http://jsfiddle.net/XYGHQ/6/
的内容