gpt4 book ai didi

javascript - 如何使用 else 语句优化这个 jquery 脚本?

转载 作者:行者123 更新时间:2023-11-28 12:35:51 24 4
gpt4 key购买 nike

我是 javascript 新手,我正在尝试编写一个垂直菜单。我现在已经让它工作了,这样当您单击列表项时,它就会更改 div 的内容。问题是,我知道我编写的 JavaScript 根本没有优化。

例如,如果我想向列表中添加另一个项目,则需要向现有脚本中添加大量代码。如果有人能给我一些使用某种 case/switch 或 if/else 框架的指导,以更少的代码完成同样的事情,那就太好了。我尝试了一些不同的方法,但没有一个能像我想要的那样工作。

这是我现在正在做的事情的一部分。 Div #2-5 在加载时隐藏,每个列表项都有一个单击功能,可以单独切换其他 div 的隐藏或显示。

$(document).ready(function(){
$('#feature2').hide();
$('#feature3').hide();
$('#feature4').hide();
$('#feature5').hide();

$('.feature1').click(function(){
$('#feature2').hide();
$('#feature3').hide();
$('#feature4').hide();
$('#feature5').hide();
$('#feature1').show();
});
$('.feature2').click(function(){
$('#feature1').hide();
$('#feature3').hide();
$('#feature4').hide();
$('#feature5').hide();
$('#feature2').show();
});
etc.

这是 jsFiddle ,其中包含我试图优化的代码:http://jsfiddle.net/7PTUu/10/

谢谢!

最佳答案

为每个链接元素以及要隐藏/显示的 div 提供一个通用 CSS 类(例如“feature-link”、“feature”)。然后将每个链接的 href 属性设置为其要显示或隐藏的元素的 ID。这样,您就可以通过一个简单的处理程序完成所有这一切。

示例 HTML:

<!-- in your vertical menu -->
<a class="feature-link" href="#feature1">Feature 1</a>
<a class="feature-link" href="#feature2">Feature 2</a>

<!-- the features you want to show/hide -->
<div class="feature" id="feature1">...</div>
<div class="feature" id="feature2">...</div>

JavaScript 示例:

// Same logic applies to all links.
$(".feature-link").click(function() {

// Get the feature we want to show.
var target = $(this).attr("href");

// Hide all other feature elements
$(".feature").hide();

// Show just the one div.
$(target).show();

// This is personal preference; I put this here to prevent the ID
// from being appended to the URL in the browser's address bar.
return false;
});

here's a jsFiddle玩玩。

关于javascript - 如何使用 else 语句优化这个 jquery 脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17093678/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com