Javascript.RU

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

Смена контента по клику
Помогите домозговать как сделать смену(контента) даже вернее блока, если предположим у меня есть какое-то колв. одинаковых блоков.

<div class="container">Содержимое</div>
<div class="container">Содержимое</div>
<div class="container">Содержимое</div>



$('.slider').hide();
 
        var select= $('.slider:eq(0)');
 
        select.show();
 
        $('.next').click(function(){
 
            select.hide();
 
            select=select.next();
 
            if (тут как-то хочу проверить если закончиличь блоки-чтобы выбрал опять первый только как это сделать в таком случаи?){
 
                select = $('.slider:eq(0)');
 
            };
 
            select.show();
 
            return false;
 
        });
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2014, 12:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

new_developer,
if(!select.length)
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2014, 16:25
Интересующийся
Отправить личное сообщение для new_developer Посмотреть профиль Найти все сообщения от new_developer
 
Регистрация: 25.07.2014
Сообщений: 28

рони,

не работает так, всего 2 блока и полсе 2 заканчивается всё

if (!select.length){

          select = $('.slider:first-child');

  }
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2014, 16:26
Интересующийся
Отправить личное сообщение для new_developer Посмотреть профиль Найти все сообщения от new_developer
 
Регистрация: 25.07.2014
Сообщений: 28

вот весь скрипт


$(function(){

        $('.slider').hide();

        var select= $('.slider:first-child');

        select.show();

        $('.next').click(function(){

            select.hide();

            select=select.next();

            if (!select.length){

                select= $('.slider:first-child');

            }

            select.show();

            return false;

        });

        $('.prev').click(function(){

            select.hide();

            select=select.prev();

            if (!select.length){

                select = $('.slider:last-child');

            };

            select.show();

            return false;

        });
    });
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2014, 16:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

Сообщение от new_developer
полсе 2 заканчивается всё
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .slider:not(:first-child){
     display: none;
   }

   </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function(){

       // $('.slider').hide();

        var select = $('.slider:first-child');

      //  select.show();

        $('.next').click(function(){

            select.hide();

            select=select.next();

            if (!select.length){

                select= $('.slider:first-child');

            }

            select.show();

            return false;

        });

        $('.prev').click(function(){

            select.hide();

            select=select.prev();

            if (!select.length){

                select = $('.slider:last-child');

            };

            select.show();

            return false;

        });
    });

  </script>
</head>

<body>
<div>
<div class="slider">Содержимое1</div>
<div class="slider">Содержимое2</div>
<div class="slider">Содержимое3</div>
</div>
<p class="next">next</p><p class="prev">prev</p>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2014, 18:12
Интересующийся
Отправить личное сообщение для new_developer Посмотреть профиль Найти все сообщения от new_developer
 
Регистрация: 25.07.2014
Сообщений: 28

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

не могу понять с чем это связано, вроде всё идентично

$(function(){

        // $('.slider').hide();

        var select = $('.slider:first-child');

        //  select.show();

        $('.next').click(function(){

            select.hide();

            select=select.next();

            if (!select.length){

                select= $('.slider:first-child');

            }

            select.show();

            return false;

        });

        $('.prev').click(function(){

            select.hide();

            select=select.prev();

            if (!select.length){

                select = $('.slider:last-child');

            };

            select.show();

            return false;

        });
    });


разметка таже, стиль добавил

Последний раз редактировалось new_developer, 31.07.2014 в 18:15.
Ответить с цитированием
  #7 (permalink)  
Старый 31.07.2014, 18:29
Интересующийся
Отправить личное сообщение для new_developer Посмотреть профиль Найти все сообщения от new_developer
 
Регистрация: 25.07.2014
Сообщений: 28

как можно отыскать причину? отдельно создал страницу всё работает
Ответить с цитированием
  #8 (permalink)  
Старый 31.07.2014, 18:49
Интересующийся
Отправить личное сообщение для new_developer Посмотреть профиль Найти все сообщения от new_developer
 
Регистрация: 25.07.2014
Сообщений: 28

рони,

если убераю в разметке обвертку блоков <div></div> то перестает работать почему так?)
Ответить с цитированием
  #9 (permalink)  
Старый 31.07.2014, 19:02
Интересующийся
Отправить личное сообщение для new_developer Посмотреть профиль Найти все сообщения от new_developer
 
Регистрация: 25.07.2014
Сообщений: 28

Если так всё работает

<div>

<div class="slider">Содержимое1</div>

<div class="slider">Содержимое2</div>

<div class="slider">Содержимое3</div>

</div>

<p class="next">next</p><p class="prev">prev</p>


чуть меняем уже работает не так как должа

<div>

<div class="slider">Содержимое1</div>

<div class="slider">Содержимое2</div>

<div class="slider">Содержимое3</div>



<p class="next">next</p><p class="prev">prev</p>
</div>
Ответить с цитированием
  #10 (permalink)  
Старый 31.07.2014, 19:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

Сообщение от new_developer
если убераю в разметке обвертку блоков <div></div> то перестает работать почему так?)
потому что select.next() = <p class="next">next</p>
вы же писали
Сообщение от new_developer
полсе 2 заканчивается всё
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .slider:not(:first-child){
     display: none;
   }

   </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function(){

       // $('.slider').hide();

        var select = $('.slider:first');

      //  select.show();

        $('.next').click(function(){

            select.hide();

            select=select.next('.slider');

            if (!select.length){

                select= $('.slider:first');

            }

            select.show();

            return false;

        });

        $('.prev').click(function(){

            select.hide();

            select=select.prev('.slider');

            if (!select.length){

                select = $('.slider:last');

            };

            select.show();

            return false;

        });
    });

  </script>
</head>

<body>
<div>
<div class="slider">Содержимое1</div>
<div class="slider">Содержимое2</div>
<div class="slider">Содержимое3</div>

<p class="next">next</p><p class="prev">prev</p>
</div>
</body>

</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена контента при нажатии на ссылку(css) x-miller-x Общие вопросы Javascript 6 24.05.2014 11:31
Плавная смена контента yyyyuriyyyy Общие вопросы Javascript 4 14.05.2014 16:21
Загрузка контента в центральный фрейм по клику в tree.Panel sergeyv ExtJS 9 06.09.2013 19:40
Смена контента Iframe shurlik9999 Events/DOM/Window 6 09.01.2013 15:27
Смена контента из бд при наведении и подсветка. Madd Общие вопросы Javascript 3 05.07.2010 10:29