Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.11.2009, 16:53
Новичок на форуме
Отправить личное сообщение для pizzZ Посмотреть профиль Найти все сообщения от pizzZ
 
Регистрация: 17.11.2009
Сообщений: 5

Помогите оптимизировать код.
Вобщем сейчас имеем:

$("#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. И в этом цикле вешать функции
Ответить с цитированием
  #2 (permalink)  
Старый 17.11.2009, 17:35
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

$(function(){
    $('[id^="afloor"]').click(function(){
        $("#ulpanel" + this.id.slice(-1)).slideToggle("fast").toggleClass("active");
    });
});

А вообще лучше еще HTML-покажите

Последний раз редактировалось Octane, 17.11.2009 в 17:45.
Ответить с цитированием
  #3 (permalink)  
Старый 17.11.2009, 17:41
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

$(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>

Последний раз редактировалось e1f, 17.11.2009 в 17:53.
Ответить с цитированием
  #4 (permalink)  
Старый 17.11.2009, 21:59
Новичок на форуме
Отправить личное сообщение для pizzZ Посмотреть профиль Найти все сообщения от pizzZ
 
Регистрация: 17.11.2009
Сообщений: 5

<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>
Ответить с цитированием
  #5 (permalink)  
Старый 17.11.2009, 22:14
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

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;
		}
	});
});
Ответить с цитированием
  #6 (permalink)  
Старый 17.11.2009, 22:52
Новичок на форуме
Отправить личное сообщение для pizzZ Посмотреть профиль Найти все сообщения от pizzZ
 
Регистрация: 17.11.2009
Сообщений: 5

Octane,
Спасибо большое помогло

Последний раз редактировалось pizzZ, 17.11.2009 в 22:54.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как узнать динамический код страницы? gosha13 Общие вопросы Javascript 5 27.07.2009 12:31
Помогите разобраться с картинками Ensiferum Я не знаю javascript 3 09.06.2009 13:56
кроссбраузерно получить код нажатой клавиши sddld Общие вопросы Javascript 5 04.03.2009 09:58
Нужно получить конечный хтмл код must_have Работа 1 05.01.2009 15:59
Помогите разобраться с логикой поведения скрипта MarkupDeveloper jQuery 3 21.06.2008 17:04