Форум

new_developer · #1 (**permalink**) 31.07.2014, 12:58

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

<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, 13:33

new_developer,

if(!select.length)

new_developer · #3 (**permalink**) 31.07.2014, 17:25

рони,

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

if (!select.length){

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

  }

new_developer · #4 (**permalink**) 31.07.2014, 17:26

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

$(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, 17:57

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

new_developer · #6 (**permalink**) 31.07.2014, 19:12

у вас вижу хорошо работает пример. У меня тоже самое 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 · #7 (**permalink**) 31.07.2014, 19:29

как можно отыскать причину? отдельно создал страницу всё работает

new_developer · #8 (**permalink**) 31.07.2014, 19:49

рони,

если убераю в разметке обвертку блоков <div></div> то перестает работать почему так?)

new_developer · #9 (**permalink**) 31.07.2014, 20:02

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

<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, 20:07

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

Форум

Справочник

Discord чат

Курсы javascript