[英]Better way to write this jQuery code consisting of many links and open/closing divs
I have 12 links and they each change which div is showing on the right side. 我有12个链接,它们每个都改变了右边显示的div。 I feel I am very inefficient in doing so with multiple click and hide statements. 通过多次单击和隐藏语句,我觉得这样做效率非常低。
$(document).ready(function() { /*PSEUDO CODE*/ /*LINK CLICKED ON OPENS CORRESPONDING DIV INSIDE DYNAMIC DIV*/ });
.box { border: 0.1em solid #000; margin: 1em; width: 70%; } .box a { padding: 2.5em; }
<div class="box"> <a href="#" id="link-one">Hello</a> <a href="#" id="link-two">Hello</a> <a href="#" id="link-three">Hello</a> </div> <div class="box"> <a href="#" id="link-four">Hello</a> <a href="#" id="link-five">Hello</a> <a href="#" id="link-six">Hello</a> </div> <div class="box"> <a href="#" id="link-seven">Hello</a> <a href="#" id="link-eight">Hello</a> <a href="#" id="link-nine">Hello</a> </div> <div class="box"> <a href="#" id="link-ten">Hello</a> <a href="#" id="link-eleven">Hello</a> <a href="#" id="link-twelve">Hello</a> </div> <div class="dynamic-div"> <div class="link-box" id="link-one-box"> </div> <div class="link-box" id="link-two-box"> </div> <div class="link-box" id="link-three-box"> </div> <div class="link-box" id="link-four-box"> </div> <div class="link-box" id="link-five-box"> </div> <div class="link-box" id="link-six-box"> </div> <div class="link-box" id="link-seven-box"> </div> <div class="link-box" id="link-eight-box"> </div> <div class="link-box" id="link-nine-box"> </div> <div class="link-box" id="link-ten-box"> </div> <div class="link-box" id="link-eleven-box"> </div> <div class="link-box" id="link-twelve-box"> </div> </div>
My current JavaScript has every div hidden initially and then when a link is clicked it manually tells every other div to close but keep the one that was clicked open. 我当前的JavaScript最初隐藏了每个div,然后当单击一个链接时,它会手动告诉每个其他div关闭但保持点击的那个打开。 This seems very inefficient and if someone could give me some pointers on how to make it less verbose I would appreciate it. 这似乎是非常低效的,如果有人可以给我一些指示如何使它更简洁,我会很感激。
Something like this? 像这样的东西?
$("a[id^=link]").click(function(){
$(".link-box").hide();
$("#"+this.id+"-box").show();
})
Checks if any <a>
with id starting with link
is clicked 检查是否有任何带有以link
开头的id的<a>
被点击
Hides all the boxes 隐藏所有的盒子
Opens the box which id is the id of the clicked link + -box
打开ID,其中id是所点击链接+ -box
的ID
$("a[id^=link]").click(function(){ $(".link-box").hide(); $("#"+this.id+"-box").show(); })
.link-box{ display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <a href="#" id="link-one">Hello</a> <a href="#" id="link-two">Hello</a> <a href="#" id="link-three">Hello</a> </div> <div class="box"> <a href="#" id="link-four">Hello</a> <a href="#" id="link-five">Hello</a> <a href="#" id="link-six">Hello</a> </div> <div class="box"> <a href="#" id="link-seven">Hello</a> <a href="#" id="link-eight">Hello</a> <a href="#" id="link-nine">Hello</a> </div> <div class="box"> <a href="#" id="link-ten">Hello</a> <a href="#" id="link-eleven">Hello</a> <a href="#" id="link-twelve">Hello</a> </div> <div class="dynamic-div"> <div class="link-box" id="link-one-box">1 </div> <div class="link-box" id="link-two-box">2 </div> <div class="link-box" id="link-three-box">3 </div> <div class="link-box" id="link-four-box">4 </div> <div class="link-box" id="link-five-box">5 </div> <div class="link-box" id="link-six-box">6 </div> <div class="link-box" id="link-seven-box">7 </div> <div class="link-box" id="link-eight-box">8 </div> <div class="link-box" id="link-nine-box">9 </div> <div class="link-box" id="link-ten-box">10 </div> <div class="link-box" id="link-eleven-box">11 </div> <div class="link-box" id="link-twelve-box">12 </div> </div>
$(document).ready(function() { /*PSEUDO CODE*/ /*LINK CLICKED ON OPENS CORRESPONDING DIV INSIDE DYNAMIC DIV*/ $('.box > a').click(function(){ var point = $(this).attr('id'); $('.dynamic-div > div').hide(); $('.dynamic-div > #'+point+'-box').show(); }); });
<!-- begin snippet: js hide: false -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <a href="#" id="link-one">Hello</a> <a href="#" id="link-two">Hello</a> <a href="#" id="link-three">Hello</a> </div> <div class="box"> <a href="#" id="link-four">Hello</a> <a href="#" id="link-five">Hello</a> <a href="#" id="link-six">Hello</a> </div> <div class="box"> <a href="#" id="link-seven">Hello</a> <a href="#" id="link-eight">Hello</a> <a href="#" id="link-nine">Hello</a> </div> <div class="box"> <a href="#" id="link-ten">Hello</a> <a href="#" id="link-eleven">Hello</a> <a href="#" id="link-twelve">Hello</a> </div> <div class="dynamic-div"> <div class="link-box" id="link-one-box">1 </div> <div class="link-box" id="link-two-box">2 </div> <div class="link-box" id="link-three-box">3 </div> <div class="link-box" id="link-four-box">4 </div> <div class="link-box" id="link-five-box">5 </div> <div class="link-box" id="link-six-box">6 </div> <div class="link-box" id="link-seven-box">7 </div> <div class="link-box" id="link-eight-box">8 </div> <div class="link-box" id="link-nine-box">9 </div> <div class="link-box" id="link-ten-box">10 </div> <div class="link-box" id="link-eleven-box">11 </div> <div class="link-box" id="link-twelve-box">12 </div> </div>
<div class="box">
<a href="#" id="link-one">Hello</a>
<a href="#" id="link-two">Hello</a>
<a href="#" id="link-three">Hello</a>
</div>
<div class="box">
<a href="#" id="link-four">Hello</a>
<a href="#" id="link-five">Hello</a>
<a href="#" id="link-six">Hello</a>
</div>
<div class="box">
<a href="#" id="link-seven">Hello</a>
<a href="#" id="link-eight">Hello</a>
<a href="#" id="link-nine">Hello</a>
</div>
<div class="box">
<a href="#" id="link-ten">Hello</a>
<a href="#" id="link-eleven">Hello</a>
<a href="#" id="link-twelve">Hello</a>
</div>
<div class="dynamic-div">
<div class="link-box" id="link-one-box">1
</div>
<div class="link-box" id="link-two-box">2
</div>
<div class="link-box" id="link-three-box">3
</div>
<div class="link-box" id="link-four-box">4
</div>
<div class="link-box" id="link-five-box">5
</div>
<div class="link-box" id="link-six-box">6
</div>
<div class="link-box" id="link-seven-box">7
</div>
<div class="link-box" id="link-eight-box">8
</div>
<div class="link-box" id="link-nine-box">9
</div>
<div class="link-box" id="link-ten-box">10
</div>
<div class="link-box" id="link-eleven-box">11
</div>
<div class="link-box" id="link-twelve-box">12
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.