Javascript 尝试删除jQuery代码的重复数据

我需要一些帮助来提高jquery的效率。我尝试过各种方法，但我得到的是我能找到的唯一最有效的方法。基本上，我有6个面板相互独立切换。。。当一个面板可见时，无论显示哪个面板，其他5个面板都将隐藏

以下是JQuery：

$("span.boxes ul li.one").click(function(){
    $("span.panel1").slideToggle();
    $("span.panel2").hide('slow');
    $("span.panel3").hide('slow');
    $("span.panel4").hide('slow');
    $("span.panel5").hide('slow');
    $("span.panel6").hide('slow');
     return false; 
});


$("span.boxes ul li.two").click(function(){
    $("span.panel2").slideToggle();
    $("span.panel3").hide('slow');
    $("span.panel4").hide('slow');
    $("span.panel5").hide('slow');
    $("span.panel6").hide('slow');
    $("span.panel1").hide('slow');
     return false; 
});

$("span.boxes ul li.three").click(function(){
    $("span.panel3").slideToggle();
    $("span.panel4").hide('slow');
    $("span.panel5").hide('slow');
    $("span.panel6").hide('slow');
    $("span.panel1").hide('slow');
    $("span.panel2").hide('slow');
     return false; 
});

$("span.boxes ul li.four").click(function(){
    $("span.panel4").slideToggle();
    $("span.panel5").hide('slow');
    $("span.panel6").hide('slow');
    $("span.panel1").hide('slow');
    $("span.panel2").hide('slow');
    $("span.panel3").hide('slow');
     return false; 
});

$("span.boxes ul li.five").click(function(){
    $("span.panel5").slideToggle();
    $("span.panel6").hide('slow');
    $("span.panel1").hide('slow');
    $("span.panel2").hide('slow');
    $("span.panel3").hide('slow');
    $("span.panel4").hide('slow');
     return false; 
});

$("span.boxes ul li.six").click(function(){
    $("span.panel6").slideToggle();
    $("span.panel1").hide('slow');
    $("span.panel2").hide('slow');
    $("span.panel3").hide('slow');
    $("span.panel4").hide('slow');
    $("span.panel5").hide('slow');
     return false; 
});

以下是html：

<span class="boxes">

<ul>
<li class="one">Title 1</li>
<li class="two">Title 2</li>
<li class="three">Title 3</li>
<li class="four">Title 4</li>
<li class="five">Title 5</li>
<li class="six">Title 6</li>
</ul>

</span> <!-- boxes -->



<div id="panel-holder">

<span class="panel1">
<p>Title 1</p>
</span>

<span class="panel1">
<p>Title 2</p>
</span>

<span class="panel1">
<p>Title 3</p>
</span>

<span class="panel1">
<p>Title 4</p>
</span>

<span class="panel1">
<p>Title 5</p>
</span>

<span class="panel1">
<p>Title 6</p>
</span>

</div> <!-- #panel-holder -->

标题1
标题2
标题3
标题4
标题5
标题6

标题1

标题2

标题3

标题4

标题5

标题6

---

谢谢你的帮助；o）

您应该编写一个自己的函数，集中包含逻辑，并为每个面板添加一个通用类名（例如，

）：

一个示例调用看起来比这更像，并且您保存了许多代码行，甚至可能需要更改一次逻辑：

$("span.boxes ul li.four").click(function(){
  togglePanels($("span.panel4"));
});

---

您应该编写一个自己的函数，集中包含逻辑，并为每个面板添加一个通用类名（例如

）：

一个示例调用看起来比这更像，并且您保存了许多代码行，甚至可能需要更改一次逻辑：

$("span.boxes ul li.four").click(function(){
  togglePanels($("span.panel4"));
});

。块元素不能在内联元素中，也就是说，

和
不能在
中

HTML

<ul id="links">
    <li class="link-1">Title 1</li>
    <li class="link-2">Title 2</li>
    <li class="link-3">Title 3</li>
    <li class="link-4">Title 4</li>
    <li class="link-5">Title 5</li>
    <li class="link-6">Title 6</li>
</ul>

<div id="panels">
    <div class="panel-1">
        <p>Title 1</p>
    </div>
    <div class="panel-2">
        <p>Title 2</p>
    </div>
    <div class="panel-3">
        <p>Title 3</p>
    </div>
    <div class="panel-4">
        <p>Title 4</p>
    </div>
    <div class="panel-5">
        <p>Title 5</p>
    </div>
    <div class="panel-6">
        <p>Title 6</p>
    </div>
</div>​

CSS

#links li{
    display:inline-block;
    padding: 10px;
    background:#ccc;  
    margin-bottom:50px; 

}

#panels > div{
    padding: 10px;
    background:red;  
    margin-bottom:50px;  
    display:none;
}
​

。块元素不能在内联元素中，也就是说，
和
不能在
中

HTML

<ul id="links">
    <li class="link-1">Title 1</li>
    <li class="link-2">Title 2</li>
    <li class="link-3">Title 3</li>
    <li class="link-4">Title 4</li>
    <li class="link-5">Title 5</li>
    <li class="link-6">Title 6</li>
</ul>

<div id="panels">
    <div class="panel-1">
        <p>Title 1</p>
    </div>
    <div class="panel-2">
        <p>Title 2</p>
    </div>
    <div class="panel-3">
        <p>Title 3</p>
    </div>
    <div class="panel-4">
        <p>Title 4</p>
    </div>
    <div class="panel-5">
        <p>Title 5</p>
    </div>
    <div class="panel-6">
        <p>Title 6</p>
    </div>
</div>​

CSS

#links li{
    display:inline-block;
    padding: 10px;
    background:#ccc;  
    margin-bottom:50px; 

}

#panels > div{
    padding: 10px;
    background:red;  
    margin-bottom:50px;  
    display:none;
}
​

使用
index（）
方法：

使用
index（）
方法：

使用index（）方法，可以将单击的元素的索引与要显示的元素的索引相匹配。如果为所有面板提供一个公共类，而不是为类编号，则会更干净

var $panels=$('[class^="panel"]');
$('.boxes li').click(function(){
    var index=$(this).index();
    $panels.not(':eq('+index+')').hide('slow');
    $panels.eq(index).slideToggle();

})

使用index（）方法，可以将单击的元素的索引与要显示的元素的索引相匹配。如果为所有面板提供一个公共类，而不是为类编号，则会更干净

var $panels=$('[class^="panel"]');
$('.boxes li').click(function(){
    var index=$(this).index();
    $panels.not(':eq('+index+')').hide('slow');
    $panels.eq(index).slideToggle();

})

jQuery是一个JavaScript框架，您不是在编辑它，而是在使用它。您要做的是提高javascript的效率。jQuery是一个javascript框架，您不是在编辑它，而是在使用它。你想做的是让你的javascript更高效。只是想为此感谢你……这是一种享受！真的很感激它…现在需要了解它为什么有效；o） 要了解方法的工作原理。。。为jQueryAPI添加书签只是想为此感谢您……它非常有用！真的很感激它…现在需要了解它为什么有效；o） 要了解方法的工作原理。。。为jQueryAPI添加书签感谢您的回复。我已经更新了我的html并删除了所有的span…有点尴尬，谢谢你指出它们的错误用法。也感谢jquery，我已经使用了charlietfl的解决方案，但我也要看看您的解决方案。正如您所知，我对jquery有点初级。再次感谢你；o） 谢谢你的回复。我已经更新了我的html并删除了所有的span…有点尴尬，谢谢你指出它们的错误用法。也感谢jquery，我已经使用了charlietfl的解决方案，但我也要看看您的解决方案。正如您所知，我对jquery有点初级。再次感谢你；o） 感谢rcmdk，你们这些乐于助人的人的反应让我非常激动。这个解决方案看起来更有效。。。我要学习为什么它工作得这么好！！再次感谢你；o） 嗯。
index（）
方法提供父元素中元素的从零开始的索引。在本例中，您的面板和选项卡的顺序和数量相同，因此选项卡的索引与相应面板的索引相同。感谢rcmdk，您的所有帮助人员的回复让您大吃一惊。这个解决方案看起来更有效。。。我要学习为什么它工作得这么好！！再次感谢你；o） 嗯。
index（）
方法提供父元素中元素的从零开始的索引。在本例中，面板和选项卡的顺序和数量相同，因此选项卡的索引与相应面板的索引相同。感谢Daxcode，似乎有多种方法可以做到这一点，我将探索所有这些方法，并尝试每种方法。我真的很感谢你的帮助。。。再次感谢。我认为这是不可能的，但如果我能报答你的好意，我会的；o） 感谢Daxcode，看起来有很多种方法可以做到这一点，我将探索它们并尝试每一种方法。我真的很感谢你的帮助。。。再次感谢。我认为这是不可能的，但如果我能报答你的好意，我会的；o）