Как перебирать div, не зная, что просматривал пользователь и что он хочет посмотреть

0

У меня есть набор 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?

благодаря

  • 0
    Легко. тот, на который они нажали, - тот, на который нацелено событие click, а предыдущий - тот, у которого нет класса .hidden. Удалите идентификаторы из ваших якорных тегов, они там не принадлежат.
  • 0
    Вы никогда не должны иметь дублированное значение id в том же документе. Они всегда должны быть уникальными.
Показать ещё 1 комментарий
Теги:

2 ответа

0
Лучший ответ

Обычно такой вид работы выполняется с использованием 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.

0

в первую очередь вам не нужен 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 и использовать селектор классов.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню