Функция по щелчку испортит мое слайдшоу jQuery

Question

Функция по щелчку испортит мое слайдшоу jQuery

0

Я пытаюсь создать слайд-шоу jQuery с нуля. Мне удалось успешно создать HTML-структуру слайд-шоу (позиционирование слайдов на вершинах друг друга).

Затем я успешно закодировал некоторый jQuery, чтобы показывать только первый слайд и только кнопку "Далее".

Вы можете увидеть, как он работает до этого момента: http://jsfiddle.net/chLNj/

Затем я попытался добавить функциональность, манипулируя divs при нажатии на следующую или предыдущую стрелки. По какой-то причине мой код разбивает сценарий jQuery, и все divs просто показывают.

Вы можете увидеть эту ошибку здесь: http://jsfiddle.net/chLNj/2/

Я не могу за всю свою жизнь понять, что я сделал неправильно (я, конечно, новичок в jQuery). Если бы кто-нибудь мог помочь мне понять, что я делаю неправильно, это было бы очень признательно!

Весь мой код в этой скрипке: http://jsfiddle.net/chLNj/2/, но здесь он снова:

CSS:

body {
    background-color: #f6f6f6;
    font-family: 'Abel', sans-serif;
    font-size: 17px;
    line-height: 23px;
    }

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

.container {
    width: 500px;
    background-color: #ffffff;
    margin: 20px auto;
    padding: 15px;
    }

.postContainer {
    width: 100%;
    margin-bottom: 20px;
    }

.postContainer h1 {
    font-family: 'Medula One', cursive;
    font-weight: normal;
    line-height: 46px;
    font-size: 52px;
    margin-bottom: 10px;
    }

/************SLIDESHOW************/

.slideshow {
    background-color: #DEDFCC;
    width: 100%;
    height: 320px;
    position: relative;
    }

.slideContainer {
    padding: 10px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    }

.slide {
    width: 60%;
    height: 300px;
    float: left;
    text-align: center;
    background-color: #C9B7B7;
    }

.slideMiddle {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.slide img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    }

.slideInfo {
    width: 40%;
    height: 80%;
    float: right;
    padding: 10px;
    }

.slideNav {
    width: 100%;
    padding: 10px;
    background-color: #C9B7B7;
    color:  #DEDFCC;
    }

.prevSlide {
    width: 50%;
    float: left;
    }

.nextSlide {
    width: 50%;
    float: right;
    text-align: right;
    }

.slideCredit {
    width: 40%;
    font-style: italic;
    font-size: 12px;
    }

.fix {
    clear: both;
    }

HTML:

<div class="container">

  <div class="postContainer">
    <h1>Harry Styles</h1>
    <p>Harry Styles is known as One Direction&#8217;s resident heartthrob. Check out this slideshow showcasing precisely why!</p>

                <div class="slideshow">


                <div class="slideContainer">
                  <div class="slide">
                    <span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/tumblr_inline_n3zn2ypCPu1qbf6hn.gif">
                  </div>
                  <div class="slideInfo">
                    <p class="slideCaption">
                      He just a cheeky fella, isn't he?                   </p>
                    <p class="slideCredit">
                      Tumblr                    </p>
                  </div> <!--slideInfo end-->
                  <div class="fix"></div>
                </div> <!--slideContainer end-->
               <!--end if each if-->


                <div class="slideContainer">
                  <div class="slide">
                    <span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/Harry-Styles.jpg">
                  </div>
                  <div class="slideInfo">
                    <p class="slideCaption">
                      Does this need an explanation?                    </p>
                    <p class="slideCredit">
                      ODC                   </p>
                  </div> <!--slideInfo end-->
                  <div class="fix"></div>
                </div> <!--slideContainer end-->
               <!--end if each if-->


                <div class="slideContainer">
                  <div class="slide">
                    <span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/article-2561301-1B94054200000578-549_634x642.jpg">
                  </div>
                  <div class="slideInfo">
                    <p class="slideCaption">
                      His glorious, glorious hair.                  </p>
                    <p class="slideCredit">
                      Google                    </p>
                  </div> <!--slideInfo end-->
                  <div class="fix"></div>
                </div> <!--slideContainer end-->
               <!--end if each if-->


                <div class="slideContainer">
                  <div class="slide">
                    <span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/article-2521940-19F5CE0900000578-42_634x738.jpg">
                  </div>
                  <div class="slideInfo">
                    <p class="slideCaption">
                      But he can also wear whatever the hell he wants and STILL look snazzy doing so.                   </p>
                    <p class="slideCredit">
                      Splash                    </p>
                  </div> <!--slideInfo end-->
                  <div class="fix"></div>
                </div> <!--slideContainer end-->
               <!--end if each if-->


                <div class="slideContainer">
                  <div class="slide">
                    <span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/Harry-Styles-in-Alexander-McQueen-BRIT-Awards-2014-600x902.jpg">
                  </div>
                  <div class="slideInfo">
                    <p class="slideCaption">
                      He can rock the latest fashions and look snazzy doing it!                 </p>
                    <p class="slideCredit">
                      Getty                 </p>
                  </div> <!--slideInfo end-->
                  <div class="fix"></div>
                </div> <!--slideContainer end-->
               <!--end if each if-->
             <!--end each-->
        </div><!--slideshow end-->
        <div class="slideNav">
            <div class="prevSlide">
              <i class="fa fa-chevron-left fa-2x"></i>
            </div>
            <div class="nextSlide">
              <i class="fa fa-chevron-right fa-2x"></i>
            </div>
            <div class="fix"></div>
        </div>
     <!--end if-->
  </div> <!--postContainer end-->



                    </div>

И, наконец, jQuery:

$(document).ready(function() {

  $(".slideshow").each(function() {
    var slideshow = $(this);
    var slides = $(slideshow).children().length;
    var n = 1;

    $(slideshow).children().hide();

    if(n == 1){
        $(".prevSlide").hide();
    }

    $(slideshow).children(':nth-child(' + n + ')').show();

    $('.nextSlide').click(function (){
        if(n == 1){
            n++;
            $(".prevSlide").show();
            $(".nextSlide").show();
            $(slideshow).children().hide();
            $(slideshow).children(':nth-child(' + n + ')').show();
            console.log(n);
        }else if(n > 1) {
            n++;
            $(slideshow).children().hide();
            $(slideshow).children(':nth-child(' + n + ')').show();
            console.log(n);
            if(n == slides){
                $(".prevSlide").show();
                $(".nextSlide").hide();
            }
        }
    }
    $('.prevSlide').click(function (){
        if(n == slides) {
            n--;
            $(".prevSlide").show();
            $(".nextSlide").show();
            $(slideshow).children().hide();
            $(slideshow).children(':nth-child(' + n + ')').show();
            console.log(n);
        }else if(n > 1) {
            n--;
            $(slideshow).children().hide();
            $(slideshow).children(':nth-child(' + n + ')').show();
            console.log(n);
            if(n == 1){
                $(".prevSlide").show();
                $(".nextSlide").hide();
            }
        }
    }


  }); // each 1 end

}); // ready method end

nellygrl 04 май 2014, в 10:44

Источник

1

К вашему сведению, после того как вы сделали $(this) и сохранили значение в slideshow , вам не нужно делать $(slideshow) ; Вы можете просто сделать slideshow.children() и тому подобное.
Collin Grady 04 май 2014, в 08:21

Теги:

jquery

1 ответ

Ещё вопросы

К вашему сведению, после того как вы сделали $(this) и сохранили значение в slideshow , вам не нужно делать $(slideshow) ; Вы можете просто сделать slideshow.children() и тому подобное.

Collin Grady · Accepted Answer · 2014-05-04T06-56-00.000Z

Вам не хватает a ); после окончательного } вашего обработчика .nextSlide.

Спасибо вам большое! Это исправило ... Обычно это так просто. И спасибо за совет о хранении переменных. Я проверю ваш ответ, как только StackOverflow позволит мне!