Javascript.RU

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

Как написать цыкл each
Помогите написать цыкл, вот html
<section id="profileBlock" class="profileBlock margin-block">
                    <nav id="ico">
                            <p class="ui-state-default ui-corner-all"><span id='idBlock' class="ui-icon ui-icon-circle-triangle-n" title="Свернуть"></span></p>  <!-- тут я выбераю id -->
                    </nav>
                    <header id="blockTop" class="blockTopRadius">Рынок</header>
                    <section class="hideBlock idBlock">                                                        <!--   Сворачиваемый блок с селектором который выбирается из #ico p span -->
                        <section id="blockBottom" class="blockBottomRadius">низ</section>
                        Рынок
                    </section>
                </section>


блоков у меня таких очень много к ним я хочу приписать hide с эфектом slideUp для исчезновения значит пишу я вот такой код

$('.profileBlock').each(function(){
        
        $('#ico p span').toggle(
    function(){
            $('.'+ $(this).attr('id')).slideUp('slow');  // Найдя класс который я передаю из атрибута по клику ссылки исчезает всё нормально 
            $('#blockTop').addClass('showBlock');   // этот класс даётся только первому элементу, как прописать чтобы он тоже перебирался в массиве?
            $('nav#ico span.ui-icon').attr({            // Тоже передавать id для того чтобы как и в случае с сворачиванием принимать, очень некрасиво и  
                'class':'ui-icon ui-icon-circle-triangle-s',  //с точки зрения програмирования очень крыво
                'title':'Развернуть'
                });

    },
    function(){
    $('.'+ $(this).attr('id')).slideDown('slow');   // Ну и тут те же проблеммы не удаляется класс showBlock, nav#ico span.ui-icon работает для всех селекторов и т.д.
    $('#blockTop').removeClass('showBlock');
    $('nav#ico span.ui-icon').attr({
        'class':'ui-icon ui-icon-circle-triangle-n',
        'title':'Свернуть'
        });
    
    });
});


Плюс ко всему, что написано в коментариях к коду, возникает ещё проблемма, когда один блок сворачиваеш, то всё норм, а когда сворачиваеш два или больше и один разворачиваеш, то на всех блоках стрелки показывающие что блоки ещё свёрнуты переключаються в режим развёрнуты.

Помогите написать этот масив по человечески, а не так как я крыво) я в jQuery новичок..
Вроде бы нашол информацию что можно использовать силектор $("селектор", this), но не понял как пользоваться.
Ответить с цитированием
  #2 (permalink)  
Старый 23.04.2011, 09:14
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Сообщение от serhanters
$('#blockTop').addClass('showBlock');   // этот класс даётся только первому элементу, как прописать чтобы он тоже перебирался в массиве?
ID элементов должен быть уникален, то есть не может быть 2 элемента с одинаковым ID. Поэтому тут ты и не сможешь в цикле пройтись. Используй класс лучше.

Сообщение от serhanters
Вроде бы нашол информацию что можно использовать силектор $("селектор", this), но не понял как пользоваться.
$("selector", context)
Selector - это ты знаешь что такое а вот
Context - это ты указываешь где нужно искать элемент, когда обычно ты его не пишешь то поиск делается по всему документу.
Вот пример:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
	var elem = $('div#place'); //Получаем DIV с ID = place
	$('div.bla', elem).addClass('myClass'); // Ищем все DIV с class = bla, внутри DIV с ID = place
});
</script>
<style>
.myClass {
	color: red;
}
</style>
</head>
<body>
<div id="place">
	<div class="bla">bla bla bla</div>
	<div class="bla">bla bla bla</div>
</div>
<div class="bla">bla bla bla</div>
</body>
</html>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай

Последний раз редактировалось walik, 23.04.2011 в 09:18.
Ответить с цитированием
  #3 (permalink)  
Старый 23.04.2011, 17:54
Интересующийся
Отправить личное сообщение для serhanters Посмотреть профиль Найти все сообщения от serhanters
 
Регистрация: 23.04.2011
Сообщений: 26

выходит, что кроме как писать для каждого хайда отдельные функции или приписать ко всем блокам (на которые нажимаю и которые должны сворачиваться) не как не обойтись?
Ответить с цитированием
  #4 (permalink)  
Старый 23.04.2011, 18:08
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Так написал же используй классы. Вместо ID пропиши всем элементам одинаковый класс, и обращайся не по ID, а по классу
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #5 (permalink)  
Старый 23.04.2011, 22:30
Интересующийся
Отправить личное сообщение для serhanters Посмотреть профиль Найти все сообщения от serhanters
 
Регистрация: 23.04.2011
Сообщений: 26

а если в елементе который нужно скрыть-развернуть и нажать есть другие прописанные классы, например кнопки у меня взяты из jQuery UI если я допишу ещё классы к примеру к кнопке hide-1 и такие же классы буду искать для скрывания блока методом $('кнопка').attr('class');
я смогу получить нужный элемент?
Ответить с цитированием
  #6 (permalink)  
Старый 23.04.2011, 23:06
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Не понял суть самого вопроса но вот простой пример:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function addClass() {
	$('.myClass').addClass('otherClass');
}

function removeClass() {
	$('.myClass').removeClass('otherClass');
}
</script>
<style>
.otherClass {
	color: red;
}
</style>
</head>
<body>
<div class="div1 myClass">blablabla</div>
<div class="div2 myClass">blablabla2</div>
<div class="div3 myClass">blablabla3</div>
<div class="div4 myClass">blablabla4</div>
<input type="button" onclick="addClass();" value="Добавить класс" /><br />
<input type="button" onclick="removeClass();" value="Удалить класс" /><br />
</body>
</html>

Тут у нас все ДИВы имеют свои классы (div1, div2, div3, div4), так же они имеют один общий класс myClass.
По ходу дела (нажимая на кнопки) мы добавляем им третий класс (otherClass) а так же его и удаляем.

Думаю этот пример сможет пролить свет ?))
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #7 (permalink)  
Старый 23.04.2011, 23:53
Интересующийся
Отправить личное сообщение для serhanters Посмотреть профиль Найти все сообщения от serhanters
 
Регистрация: 23.04.2011
Сообщений: 26

спасибо разобрался со всем сам, вот пример

<section id="profileBlock" class="profileBlock margin-block">
                	<nav id="ico">
                        	<p class="ui-state-default ui-corner-all"><span id="hide-8" class="ui-icon ui-icon-circle-triangle-n" title="Свернуть"></span></p>
                    </nav>
                    <header id="blockTop" class="blockTopRadius hide-8">блок1</header>
                    <section class="hideBlock hide-8">
                        <section id="blockBottom" class="blockBottomRadius">низ</section>
                        блок1
                    </section>
                </section>
                <section id="profileBlock" class="profileBlock margin-block">
                	<nav id="ico">
                        	<p class="ui-state-default ui-corner-all"><span id="hide-9" class="ui-icon ui-icon-circle-triangle-n" title="Свернуть"></span></p>
                    </nav>
                    <header id="blockTop" class="blockTopRadius hide-9">блок2</header>
                    <section class="hideBlock hide-9">
                        <section id="blockBottom" class="blockBottomRadius">низ</section>
                        блок2
                    </section>
                </section>



$('#ico p span').toggle(
	    function(){
		var idElem = '.'+ $(this).attr('id');
	            $('.hideBlock'+idElem).slideUp('slow');  
	            $('.blockTopRadius'+idElem).addClass('showBlock');   
	            $('#'+$(this).attr('id')).attr({           
                'class':'ui-icon ui-icon-circle-triangle-s', 
	                'title':'Развернуть'
	                });
	 
	    },
	    function(){
				var idElem = '.'+ $(this).attr('id');
	            $('.hideBlock'+idElem).slideDown('slow'); 
	            $('.blockTopRadius'+idElem).removeClass('showBlock'); 
	            $('#'+$(this).attr('id')).attr({  
                'class':'ui-icon ui-icon-circle-triangle-n',
	                'title':'Свернуть'
	                });
	    });
	});


всё работает идеально единственный минус, это что на кнопку нужно вешать унекальный id и на блок который сворачивается и которому даётся стиль нужно писать класс такой же как id, оцените как независимый експерт норм написано или можно лутше?))

Последний раз редактировалось serhanters, 24.04.2011 в 01:36.
Ответить с цитированием
  #8 (permalink)  
Старый 24.04.2011, 10:16
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Хех Мне до эксперта еще учить и учить
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 19:48
Как узнать, присутствует ли в окне полоса прокрутки или нет? возжаждавший Элементы интерфейса 6 12.03.2010 22:00
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 19:56
как можно создать iframe со скриптами GOll Общие вопросы Javascript 2 05.05.2009 10:32
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 12:55