我如何缩短这个jQuery?我认为必须有比这更好的工作方式!?
(记得我是jQuery的新手)......
<script>
jQuery(function() {
var White = jQuery("#white").hide();
jQuery("#firstpagename").on("click", function() {
White.toggle();
});
});
</script>
<script>
jQuery(function() {
var Black2 = jQuery("#v2black").hide();
jQuery("#secondpagename").on("click", function() {
Black2.toggle();
});
});
</script>
<script>
jQuery(function() {
var Black3 = jQuery("#v3black").hide();
jQuery("#thirdpagename").on("click", function() {
Black3.toggle();
});
});
</script>
任何帮助或指示都会很棒,因为我已经到了本网站的最后一步,并希望它完成:)
答案 0 :(得分:4)
您可以在链接上使用一些额外的数据属性和一个额外的类来缩短它。
所以让我们说你的HTML看起来像这样:
<div id="white">white</div>
<div id="v2black">v2black</div>
<div id="v3black">v3black</div>
<div id="firstpagename" class="toggle" data-for="white">toggle white</div>
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div>
<div id="thirdpagename" class="toggle" data-for="v3black">toggle v3black</div>
然后你的jquery可以像这样重写:
jQuery(function() {
$('.toggle').on('click', function() {
var id = $(this).attr('data-for');
$('#' + id).toggle();
});
});
答案 1 :(得分:2)
所以看起来我们正试图重新制作标准的“手风琴”行为。根据页面的布局,如果可能,封装您的项目会很有帮助。这是一个可以打开和关闭的东西的可能解决方案。 jsFiddle
<div id="white" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<div id="v2black" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<div id="v3black" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<script>
jQuery(".tab").on("click", function() {
$(this).closest('.panel').find('.content').toggle();
});
</script>
首先,我们将代码压缩成一个脚本标记和一个文档就绪语句,因为它有3个部分只会增加膨胀。
然后我确保选择$
作为doc ready回调的参数。 jQuery会通过它传递一个参数jQuery
所以在我们的代码块中我们可以安全地使用$
,即使在我们的代码块之外它也被保留用于其他目的。
此处.tab
通过遍历最近的.content
并退回来控制他们的.panel
。通过这种方式,相同的行为可以控制所有3.
但是,如果您的“标签”无法像这样封装,您始终可以将它们与以其他方式显示/隐藏的内容相关联。我们只需要看看你的HTML。
答案 2 :(得分:0)
<script>
jQuery(function() {
var White = jQuery("#white").hide();
jQuery("#firstpagename").on("click", function() {
White.toggle();
var Black2 = jQuery("#v2black").hide();
jQuery("#secondpagename").on("click", function() {
Black2.toggle();
});
var Black3 = jQuery("#v3black").hide();
jQuery("#thirdpagename").on("click", function() {
Black3.toggle();
});
});
</script>
开始。如果您还有更多元素,则可能需要循环使用buttonid&lt;&gt; toggleid地图:
var map = {
"white": "firstpagename",
"v2black": "secondpagename",
...
};
for (var toggler in map)
makeToggle(toggler, map[toggler]);
function makeToggle(togglerid, pageid) {
var page = $(document.getElementById(pageid)).hide();
$(document.getElementById(togglerid)).click(function() {
page.toggle();
});
}