Как написать цыкл 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), но не понял как пользоваться. |
Цитата:
Цитата:
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>
|
выходит, что кроме как писать для каждого хайда отдельные функции или приписать ко всем блокам (на которые нажимаю и которые должны сворачиваться) не как не обойтись?
|
Так написал же используй классы. Вместо ID пропиши всем элементам одинаковый класс, и обращайся не по ID, а по классу
|
а если в елементе который нужно скрыть-развернуть и нажать есть другие прописанные классы, например кнопки у меня взяты из jQuery UI если я допишу ещё классы к примеру к кнопке hide-1 и такие же классы буду искать для скрывания блока методом $('кнопка').attr('class');
я смогу получить нужный элемент? |
Не понял суть самого вопроса но вот простой пример:
<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) а так же его и удаляем. Думаю этот пример сможет пролить свет ?)) |
спасибо разобрался со всем сам, вот пример
<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, оцените как независимый експерт норм написано или можно лутше?)) |
Хех :thanks: Мне до эксперта еще учить и учить :write: :)
|
| Часовой пояс GMT +3, время: 12:34. |