Форум

serhanters · #1 (**permalink**) 23.04.2011, 01:26

Помогите написать цыкл, вот 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), но не понял как пользоваться.

walik · #2 (**permalink**) 23.04.2011, 10:14

Сообщение от 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>

serhanters · #3 (**permalink**) 23.04.2011, 18:54

выходит, что кроме как писать для каждого хайда отдельные функции или приписать ко всем блокам (на которые нажимаю и которые должны сворачиваться) не как не обойтись?

walik · #4 (**permalink**) 23.04.2011, 19:08

Так написал же используй классы. Вместо ID пропиши всем элементам одинаковый класс, и обращайся не по ID, а по классу

serhanters · #5 (**permalink**) 23.04.2011, 23:30

а если в елементе который нужно скрыть-развернуть и нажать есть другие прописанные классы, например кнопки у меня взяты из jQuery UI если я допишу ещё классы к примеру к кнопке hide-1 и такие же классы буду искать для скрывания блока методом $('кнопка').attr('class');
я смогу получить нужный элемент?

walik · #6 (**permalink**) 24.04.2011, 00:06

Не понял суть самого вопроса но вот простой пример:

<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) а так же его и удаляем.

Думаю этот пример сможет пролить свет ?))

serhanters · #7 (**permalink**) 24.04.2011, 00:53

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

<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, оцените как независимый експерт норм написано или можно лутше?))

walik · #8 (**permalink**) 24.04.2011, 11:16

Хех

Мне до эксперта еще учить и учить

Форум

Справочник

Discord чат

Курсы javascript