Почему функция OnClick работает только один раз и после изменения размера окна? - PullRequest
Новая
       31

Почему функция OnClick работает только один раз и после изменения размера окна?

0 голосов
/ 24 марта 2020

Я создал прокручиваемый контейнер в WordPress с мгновенной прокруткой. Он содержит модуль портфолио. 

<div id="projekte-startseite" class="et_pb_module et_pb_filterable_portfolio et_pb_filterable_portfolio_0 scroll-snap   et_pb_css_filters et_pb_portfolio et_pb_bg_layout_light et_pb_filterable_portfolio_fullwidth" data-posts-number="20" style="display: block;">


                <div class="et_pb_portfolio_filters clearfix"><ul class="clearfix"><li class="et_pb_portfolio_filter et_pb_portfolio_filter_all"><a href="#" class="active" data-category-slug="all">Alle</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="aktuelle-projekte">Aktuelle Projekte</a></li></ul></div><!-- .et_pb_portfolio_filters -->

                <div class="et_pb_portfolio_items_wrapper no_pagination">
                    <div class="et_pb_portfolio_items">             <div id="post-4572" class="et_pb_portfolio_item project_category_aktuelle-projekte project_category_gelb et_pb_filterable_portfolio_item_0_0 post-4572 project type-project status-publish has-post-thumbnail hentry project_category-aktuelle-projekte project_category-gelb active first_in_row" style="">
                                        <a href="http://demo.braunmitbraun-designagentur.de/project/gelb">
                            <span class="et_portfolio_image">
                                <img src="http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/gelbe-fläche_web.jpg" alt="Gelb" class="" width="1080" height="9999">                                                  </span>
                        </a>
                                </div><!-- .et_pb_portfolio_item -->
                                <div id="post-133" class="et_pb_portfolio_item project_category_aktuelle-projekte project_category_branding project_category_corporate-design project_category_print project_category_web et_pb_filterable_portfolio_item_0_1 post-133 project type-project status-publish has-post-thumbnail hentry project_category-aktuelle-projekte project_category-branding project_category-corporate-design project_category-print project_category-web active last_in_row">
                                        <a href="http://demo.braunmitbraun-designagentur.de/projekte/manuela-ostermann-physiotherapie/corporate-design">
                            <span class="et_portfolio_image">
                                <img src="http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Ostermann-Physiotherapie-Corporate-Design.jpg" alt="Manuela Ostermann" class="" width="1080" height="9999" srcset="http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Ostermann-Physiotherapie-Corporate-Design.jpg 1080w, http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Ostermann-Physiotherapie-Corporate-Design-980x1265.jpg 980w, http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Ostermann-Physiotherapie-Corporate-Design-480x620.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1080px, 100vw">                                                    </span>
                        </a>
                                </div><!-- .et_pb_portfolio_item -->
                                <div id="post-88" class="et_pb_portfolio_item project_category_aktuelle-projekte project_category_event project_category_kundenevent project_category_print et_pb_filterable_portfolio_item_0_2 post-88 project type-project status-publish has-post-thumbnail hentry project_category-aktuelle-projekte project_category-event project_category-kundenevent project_category-print active first_in_row">
                                        <a href="http://demo.braunmitbraun-designagentur.de/projekte/benecke-kaliko/the-value-of-better-interiors-conference.html">
                            <span class="et_portfolio_image">
                                <img src="http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Benecke-Kaliko-listen-to-the-surface.jpg" alt="Benecke-Kaliko" class="" width="1080" height="9999" srcset="http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Benecke-Kaliko-listen-to-the-surface.jpg 1080w, http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Benecke-Kaliko-listen-to-the-surface-980x1265.jpg 980w, http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Benecke-Kaliko-listen-to-the-surface-480x620.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1080px, 100vw">                                                   </span>
                        </a>
                                </div><!-- .et_pb_portfolio_item -->
                </div><!-- .et_pb_portfolio_items -->
                </div>

            </div>

И есть кнопка для прокрутки по клику. 

<button class="button-next" onClick="goCarousel('next')"></button>

А вот код javascript, который я использовал для реализации прокрутки по щелчку. Я нашел его на этой платформе и просто переименовал идентификаторы и классы: 

<script>
 var carouselPositions;
var halfContainer;
var currentItem;

function getCarouselPositions() {
  carouselPositions = [];
  document.querySelectorAll('.et_pb_portfolio_item').forEach(function(div) {
    carouselPositions.push([div.offsetTop, div.offsetTop + div.offsetHeight]); // add to array the positions information
  })
  halfContainer = document.querySelector('#projekte-startseite').offsetHeight/2;
}

getCarouselPositions(); // call it once

function goCarousel(direction) {

  var currentScrollTop = document.querySelector('#projekte-startseite').scrollTop;
  var currentScrollBottom = currentScrollTop + document.querySelector('#projekte-startseite').offsetHeight;

  if (currentScrollTop === 0 && direction === 'next') {
      currentItem = 1;
  } else if (currentScrollBottom === document.querySelector('#projekte-startseite').scrollHeight && direction === 'previous') {
      console.log('here')
      currentItem = carouselPositions.length - 2;
  } else {
      var currentMiddlePosition = currentScrollTop + halfContainer;
      for (var i = 0; i < carouselPositions.length; i++) {
        if (currentMiddlePosition > carouselPositions[i][0] && currentMiddlePosition < carouselPositions[i][1]) {
          currentItem = i;
          if (direction === 'next') {
              currentItem++;
          } else if (direction === 'previous') {
              currentItem--    
          }
        }
      }
  } 

  document.getElementById('projekte-startseite').scrollTo({
    top: carouselPositions[currentItem][0],
    behavior: 'smooth' 
  });

}
window.addEventListener('resize', getCarouselPositions);
    </script>

Я не очень разбираюсь в javascript, поэтому я просто разместил этот код на своем веб-сайте и надеялся на лучшее. К счастью, это работает. Но проблема в том, что если я нажму на кнопку, чтобы прокрутить вниз, он будет работать только один раз. Если я нажму второй раз, он больше не работает. Я обнаружил, что он работает нормально, когда я изменяю размер окна, но это не может быть решением :-D "Эй, пользователь, пожалуйста, измени размер окна, чтобы этот веб-сайт работал"

Я очень благодарен за любые идеи и фрагменты кода !!!

1 Ответ

0 голосов
/ 26 марта 2020

Я смог решить эту проблему самостоятельно. Я добавил идентификатор "nextBtn" к кнопке и поместил его в конец моего javascript кода:

document.getElementById ("nextBtn"). AddEventListener ('click', getCarouselPositions);

Если у вас есть лучшее решение, пожалуйста, дайте мне знать, потому что я новичок ie на javascript, готов учиться!

...