У меня есть набор DIVs
Один DIV изначально установлен без атрибута.hidden, который есть у всех остальных.
У меня есть набор HREF для вызова DIV, который сделает его SHOW.
У меня есть css для "HIDDEN display: none"; и "SHOW display: block;"
Я хочу, чтобы иметь возможность LOOP через все div, удалить атрибут.hidden для выбранного div и поместить атрибут.hidden для OLD div...
Просто так? Мои знания JQ ограничены и натыкаются по дороге... как сейчас.
Здесь код:
<section id='content'>
<div id='stuff1' class='somestuff hidden'>
<p>Hello World 1</p>
</div>
<div id='stuff2' class='somestuff'>
<p>Hello World 2</p>
</div>
<div id='stuff3' class='somestuff hidden'>
<p>Hello World 3</p>
</div>
<div id='stuff4' class='somestuff hidden'>
<p>Hello World 4</p>
</div>
<div id='stuff5' class='somestuff hidden'>
<p>Hello World 5</p>
</div>
</section>
Здесь NAV:
<div id='nav'>
<a href='#' onclick='changePage(this.id)' id='stuff1'>Click for Content 1</a>
<a href='#' onclick='changePage(this.id)' id='stuff2'>Click for Content 2</a>
<a href='#' onclick='changePage(this.id)' id='stuff3'>Click for Content 3</a>
<a href='#' onclick='changePage(this.id)' id='stuff4'>Click for Content 4</a>
<a href='#' onclick='changePage(this.id)' id='stuff5'>Click for Content 5</a>
</div>
И, наконец, я считаю, что функция:
<script>
function changePage(currPage)
{
$(document).ready(function() {
$('#' + currPage + 'Page .contentBody').each(function(i, j) {
console.log(i); //the i
console.log(j); //the div
$('#' + currPage + 'Page' + "Page").removeClass('hiddenstuff');
$('#' + currPage + 'Page' + "Page").addClass('hiddenstuff');
});
});
}
</script>
Да, я знаю, что эта функция повсюду, но по существу, как я узнаю, что пользователь нажмет и когда они это сделают, и который они просто ушли, а какой из них они собираются? Hmmmmm?
благодаря
Обычно такой вид работы выполняется с использованием href метки привязки, чтобы он мог грамотно деградировать в среде, отличной от javascript.
Во-вторых, вместо того, чтобы передавать идентификатор метки привязки, почему бы не передать href, поскольку он теперь находится в href? Или, пока мы на нем, просто передайте this
полностью. Кроме того, вы захотите вернуть ответ от changePage, чтобы мы могли предотвратить скачок страницы.
<a href='#stuff1' onclick='return changePage(this)'>Click for Content 1</a>
<a href='#stuff2' onclick='return changePage(this)'>Click for Content 2</a>
<a href='#stuff3' onclick='return changePage(this)'>Click for Content 3</a>
Теперь мы можем отделить "страницу" от идентификаторов div содержимого.
<section id='content'>
<div id='stuff1' class='somestuff hidden'>
<p>Hello World 1</p>
</div>
<div id='stuff2' class='somestuff'>
<p>Hello World 2</p>
</div>
<div id='stuff3' class='somestuff hidden'>
<p>Hello World 3</p>
</div>
<div id='stuff4' class='somestuff hidden'>
<p>Hello World 4</p>
</div>
<div id='stuff5' class='somestuff hidden'>
<p>Hello World 5</p>
</div>
</section>
Со всем этим на месте, вот как выглядел бы javascript:
function changePage(el) {
var target = $(el).attr("href"); // using jQuery to avoid an IE inconsistency
$(target).show().siblings().hide();
// prevent page jump
return false;
}
Просто так? ну, это может быть проще.
<a href='#stuff1' class="changepage">Click for Content 1</a>
<a href='#stuff2' class="changepage">Click for Content 2</a>
<a href='#stuff3' class="changepage">Click for Content 3</a>
и js:
$(document).ready(function(){
$(".changepage").click(function(){
var target = $(this).attr("href"); // using jQuery to avoid an IE inconsistency
$(target).show().siblings().hide();
// prevent page jump
return false;
});
});
Чтобы это ухудшилось, как упоминалось в начале, добавьте тег no-script, который включает встроенный стиль, который показывает.hidden divs.
в первую очередь вам не нужен document.ready внутри функции. Второй идентификатор всегда должен быть уникальным. Несколько элементов с одинаковым идентификатором недействительны.
попробуй это
измените свой идентификатор <a>
id на идентификатор data-id
(используя атрибуты данных HTML5). это должно сделать все идентификаторы уникальными.
<a href='#' onclick='changePage(this)' data-id='stuff1'>Click for Content 1</a>
и javascript (jquery)
function changePage(currObj)
{
$('.somestuff').addClass('hidden');
$('#' + $(currObj).data('id')).removeClass('hidden');
}
учитывая, somestuff
класс somestuff
присутствует во всех div. если не добавить общий класс ко всем div и использовать селектор классов.
id
в том же документе. Они всегда должны быть уникальными.