.hide（）.show（）div菜单上的javascript / Jquery改进
[英]javascript/Jquery improvement on a .hide() .show() div menu
问题描述
i am super new to javascript and jquery self thought ....been working on this menu for a bit and i have finally "finished" but iv got some horrendous code and i am looking for ways to improve my code to make it more readable and functional any tips and hints would be helpful. 
我是javascript和jquery自我思考的超级新手.... been在此菜单上工作了一段时间，我终于“完成了”，但是iv得到了一些可怕的代码，我正在寻找方法来改进我的代码以使其更具可读性以及功能方面的任何提示和提示都会有所帮助。 the idea to save space on the page each div will have different parts of a form that the user will fill out here is some of the code 节省页面空间的想法是，每个div都会有表单的不同部分，用户将在此处填写一些代码
<body>
<div class="content">
<div class="menu" id="menu"></div>
<div class="content" id="sort"></div>
<div class="menu"id="menu1"></div>
<div class="content" id="1sort"></div>
<div class="menu"id="menu2"></div>
<div class="content" id="sort2"></div>
</div>
<script>
var show = true;
var show2 = false;
var show3 = false;
$('#1sort').hide("fast");
$('#sort2').hide("fast");
$("#menu").click(function () {
if (show == true) {
$('#sort').hide("fast");
$('#1sort').show("fast");
show = false;
show2 = true;
} else if (show == false) {
$('#sort').show("fast");
$('#1sort').hide("fast");
$('#sort2').hide("fast");
show = true;
show2 = false;
show3 = false;
}
});
$("#menu1").click(function () {
if (show2 == true) {
$('#1sort').hide("fast");
$('#sort2').show("fast");
show2 = false;
show3 = true;
} else if (show2 == false) {
$('#1sort').show("fast");
$('#sort').hide("fast");
$('#sort2').hide("fast");
show = false;
show2 = true;
show3 = false;
}
});
$("#menu2").click(function () {
if (show3 == false) {
$('#1sort').hide("fast");
$('#sort').hide("fast");
$('#sort2').show("fast");
show = false;
show2 = false;
show3 = true;
}
});
</script>
4 个解决方案
解决方案1
1 2012-06-28 11:47:27
A useful technique here is to adorn some extra attributes (preferably html5 data-* ) onto the links to indicate what it's associated content is. 这里有用的技术是在链接上装饰一些额外的属性（最好是html5 data-* ），以指示其相关内容是什么。
<div class="menu" id="menu" data-content="sort"></div>
<div class="content" id="sort"></div>
<div class="menu"id="menu1" data-content="1sort"></div>
<div class="content" id="1sort"></div>
<div class="menu" id="menu2" data-content="sort2"></div>
<div class="content" id="sort2"></div>
You can then use this when an item is clicked to hide the currently visible one, and show the required one: 然后，您可以在单击某项以隐藏当前可见的项并显示所需的项时使用它：
$('.menu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
});
Live example: http://jsfiddle.net/hAbPa/ 实时示例： http ： //jsfiddle.net/hAbPa/
解决方案2
1 已采纳 2012-06-28 12:00:54
You can use some basic traversal functions, and .is to determine visibility. 您可以使用一些基本的遍历函数和.is来确定可见性。 You don't need boolean variables nor element IDs that way: http://jsfiddle.net/K2sqy/2/ . 您不需要布尔变量也不需要元素ID： http : //jsfiddle.net/K2sqy/2/ 。
$(".menu").click(function() {
var $next = $(this).next(".content"); // corresponding .content element
var isVisible = $next.is(":visible"); // is it currently visible?
$(this).siblings(".content").hide("fast"); // hide all siblings
$next[isVisible ? "hide" : "show"]("fast"); // toggle the corresponding .content
if(isVisible) {
// it was visible, so now it's hidden. Show the other .content:
// the next or, if not available, the previous
var $second = $next.nextAll(".content").first();
if($second.length === 0) {
$second = $next.prevAll(".content").first();
}
$second.show("fast");
}
});
解决方案3
0 2012-06-28 11:44:42
解决方案4
-1 2012-06-28 11:48:58
I'm not 100% sure (untested)... but this is pretty close I think. 我不确定100％（未测试）...但是我认为这非常接近。
$(".menu").click(function (){
$(this).next('.content').toggle();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.