Помогите оптимизировать код.
Вобщем сейчас имеем:
$("#sidebar").ready(function(){
$("#afloor1").click(function(){
$("#ulpanel1").slideToggle("fast");
$("#ulpanel1").toggleClass("active");
});
$("#afloor2").click(function(){
$("#ulpanel2").slideToggle("fast");
$("#ulpanel2").toggleClass("active");
});
$("#afloor3").click(function(){
$("#ulpanel3").slideToggle("fast");
$("#ulpanel3").toggleClass("active");
});
$("#afloor4").click(function(){
$("#ulpanel4").slideToggle("fast");
$("#ulpanel4").toggleClass("active");
});
$("#afloor5").click(function(){
$("#ulpanel5").slideToggle("fast");
$("#ulpanel5").toggleClass("active");
});
$("#afloor6").click(function(){
$("#ulpanel6").slideToggle("fast");
$("#ulpanel6").toggleClass("active");
});
});
Поясню, как только загружаеться sidebar на кнопки afloor1-6 вешаеться событие которое скрывает/показывает блок ulpanel1-6 Так вот, как бы Вы сократили код? Мне на ум приходит только цикл от 1 до 6. И в этом цикле вешать функции |
$(function(){
$('[id^="afloor"]').click(function(){
$("#ulpanel" + this.id.slice(-1)).slideToggle("fast").toggleClass("active");
});
});
А вообще лучше еще HTML-покажите |
$(function(){
$('#afloor1, #afloor2, #afloor3, #afloor4, #afloor5, #afloor6').each(function(i){
$(this).click(function(){
$('#ulpanel'+(i+1)).slideToggle('fast').toggleClass('active');
});
});
});
UPD А вообще лучше как-то так: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Без имени</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18" />
</head>
<style type="text/css">
.afloor {
border: 3px solid green;
margin: 3px;
width: 30%;
cursor: pointer;
}
.ulpanel {
border: 3px solid navy;
margin: 3px;
width: 50%;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
<!--
$(function(){
$('.afloor').each(function(i){
$(this).click(function(){
$('.ulpanel:eq('+i+')').slideToggle('fast').toggleClass('active');
});
});
});
//-->
</script>
<body id="sidebar">
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
</body>
</html>
|
<ul class="ulstyle">
<li><a href="#" id="afloor1">Кнопка</a>
<ul class="ulstyle btn-slide" id="ulpanel1">
<li></li>
<li></li>
</ul>
</li>
...
<li><a href="#" id="afloor6">Кнопка</a>
<ul class="ulstyle btn-slide" id="ulpanel6">
<li></li>
<li></li>
</ul>
</li>
</ul>
|
idшники для JavaScript тогда вообще не понадобятся:
<ul class="panels"> <li> <a href="#" class="toggler">Кнопка</a> <ul> <li>…</li> <li>…</li> </ul> </li> … <li> <a href="#" class="toggler">Кнопка</a> <ul> <li>…</li> <li>…</li> </ul> </li> </ul> $(function() {
$(".panels").click(function (event) {
var obj = $(event.target);
if (obj.hasClass("toggler")) {
obj.next("ul").slideToggle("fast").toggleClass("active");
return false;
}
});
});
|
Octane,
Спасибо большое помогло :) |
| Часовой пояс GMT +3, время: 00:40. |