Как заставить код JS работать в цикле PHP?

Question

[Дмитрий Лахно]

Помогите разобраться с кодом JS в цикле PHP.
Код JS выполняется только для последнего элемента в DOM а нужно для каждого.
Вот сам код:

<?php $args=array(
                'orderby' => 'ASK',
                'post_type' => 'web_icon_portfolio',
                'showposts' => 5
            );
            $i = 1;
            $acsessuar = get_posts($args);
            foreach ($acsessuar as $post) :
                setup_postdata($post); ?>

                <div id="kvad_<?php echo $i; ?>" class="<?php if($i > 2){ echo "normal_kvad col-md-4 col-sm-6 col-xs-12"; }else{ echo "big_kvad col-md-6 col-xs-12"; }; ?>">
                </div>
                <script>
                    /****Добавление классов при прокрутке****/
                    (function kvad_<?php echo $i; ?> () {
                        var testDiv_<?php echo $i; ?> = document.getElementById('kvad_<?php echo $i; ?>');

                        window.onscroll = function() {
                            if ( isVisible(testDiv_<?php echo $i; ?>) ) {
                                // выполнится если элемент хотя бы частично видно
                                $(testDiv_<?php echo $i; ?>).addClass("hover");
                            } else {
                                //выполнится если элемент за пределами видимости
                                $(testDiv_<?php echo $i; ?>).removeClass("hover");
                            }
                        }
                        function isVisible(elem) {
                            var elCoords = getCoords(elem);
                            var docCoords = getDocumentScroll();

                            if (elCoords.top < docCoords.bottom && elCoords.top > (docCoords.top - elem.offsetHeight) ) {
                                return true;
                            }
                            return false;
                        }

                        //коорднаты элемента относительно документа
                        function getCoords(elem) {
                            var box = elem.getBoundingClientRect();

                            var body = document.body;
                            var docEl = document.documentElement;

                            var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
                            var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

                            var clientTop = docEl.clientTop || body.clientTop || 0;
                            var clientLeft = docEl.clientLeft || body.clientLeft || 0;

                            var top  = box.top +  scrollTop - clientTop;
                            var left = box.left + scrollLeft - clientLeft;

                            return { top: Math.round(top), left: Math.round(left) };
                        }

                        //координаты видимой части
                        function getDocumentScroll() {
                            return {
                                top: getDocumentScrollTop(),
                                bottom: getDocumentScrollBottom(),
                                height: getDocumentScrollHeight()
                            };
                        }

                        function getDocumentScrollTop() {
                            var html = document.documentElement;
                            var body = document.body;

                            var scrollTop = html.scrollTop || body && body.scrollTop || 0;
                            scrollTop -= html.clientTop; // IE<8

                            return scrollTop;
                        }

                        function getDocumentScrollBottom() {
                            return getDocumentScrollTop() + document.documentElement.clientHeight;
                        }

                        function getDocumentScrollHeight() {
                            var scrollHeight = document.documentElement.scrollHeight;
                            var clientHeight = document.documentElement.clientHeight;

                            scrollHeight = Math.max(scrollHeight, clientHeight);

                            return scrollHeight;
                        }
                    })();
                    /****END Добавление классов при прокрутке****/
                </script>
                <?php $i++ ?>
                <?php wp_reset_postdata(); ?>
            <?php endforeach; ?>

Код JS должен добавлять дивам с id "kvad_<?php echo $i; ?>" класс "hover" тогда когда они видимы на экране при скроле.

Comments

[OVK2015]

А foreach ($acsessuar as $post) с таким синтаксисом вообще по всем постам проходит?

[Дмитрий Лахно]

OVK2015: нет, только по конкретной таксономии

[OVK2015]

Дмитрий Лахно: Я имел ввиду: проходит обрабатываются ли все уже выбранные посты кодом ниже foreach

Answer 1

[DenJel]

Вынесите JS за цикл php и напишите там нормальный код, который берет все элементы с такими классами и пробегает по ним и проверяет ваши условия. Что-то типо:

window.onscroll = function() {
  document.getElementsByClassName( 'class' ).forEach( function( el, id ) {
      if ( isVisible( el ) ) {
        doSmthWithEl()
    }
  } );
}

с jquery это делается за пару строк

Answer 2

[Анатолий]

Ваши жс функции перезаписывают друг друга, вынесите жс отдельно за этот цикл и обрабатывайте нормально по евентам. дайте всем дивам одинаковый класс и в onscroll в цикле пройдитесь по всем элементам с таким классом и делайте с каждым что нужно.