Question

我一直在寻找这个答案，但仍然没有运气。

我有一个动态生成的Instagram Feed，其中一个高亮图像侧面有两个缩略图（上一张图像和下一张图像）。

看看：http://dandelionflowershop.com/index.php/website（滚动到显示Instagram Feed的底部）。

如果用户单击以使轮播移动到下一个图像，则右侧图像会通过更改为下一个图像来正确响应。那是对的。它应该每次都这样做，但问题是它只激活ONCE，而不是无限期。我认为这与$（'document'）。ready（）函数有关，但我真的不知道如何正常工作。

为什么它只能工作一次？我怎样才能让它连续工作？

我是否需要AJAX或更复杂的东西来实现这一目标？

这是我的代码（JQuery位于结束标记之前的底部。：

<!-- Instagram Area -->
            <?php $instagram_array=array(); ?>
            {exp:ig_picpuller:media_recent user_id="1"}
            <?php $instagram_array[] = '{ig_low_resolution}'; ?>
            {/exp:ig_picpuller:media_recent}
            <?php $instagram_count = 0; ?>


        <div id="instagram_wrapper">
        <?php
        $instagram_count_prev = 9;
        $instagram_count_next = 1;
        $ig_next_img = $instagram_array[$instagram_count_next];
        ?>

            <div class="instagram_label left">
                <img class="left" src="{img}logo_instagram.png" />
                Instagram<br />
                <b>dandelionflowers</b>
            </div>

            <div class="instagram_thumb_left">
                <img id="insta_prev" class="width100" src="<?php print $instagram_array[$instagram_count_prev]; ?>">
            </div>

            <div class="instagram_thumb_right right">
                <img id="insta_next" class="width100" src="<?php print $instagram_array[$instagram_count_next]; ?>">
            </div>


            <div class="instagram_frame">

                <div id="instagram_carousel" class="carousel slide carousel-fade" data-interval="false">
                <!-- Carousel items -->
                    <div class="carousel-inner">
                        {exp:ig_picpuller:media_recent user_id="1"}
                            <div class="item slides instagram_highlight">
                                <img src="{ig_standard_resolution}">
                                <div class="instagram_info">
                                    <img src="{img}heart.png" />{ig_likes}<br />
                                   <img src="{img}comment.png" />{ig_caption}
                                </div>
                            </div>
                        {/exp:ig_picpuller:media_recent}
                    </div> 

                <!-- Carousel nav -->
                <a class="carousel-control left highlight_style instagram_nav_prev" href="#instagram_carousel" data-slide="prev">&lsaquo;</a> 
                <a class="carousel-control right highlight_style instagram_nav_next" href="#instagram_carousel" data-slide="next">&rsaquo;</a>
                </div> <!-- #instagram_carousel -->

            </div> <!-- .instagram_frame -->

        </div>


       <div class="clear">
       <br /><br />
       Array Information:<br />
        <?php print_r($instagram_array); ?>
        </div>

    </div> <!-- .page_wrapper -->


<!-- Bootstrap JQuery-->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="{template_root}bootstrap/js/bootstrap.min.js"></script>
<!-- Dandelion Javascript -->
<script type="text/javascript" src="{template_root}site_script.js"></script>
<script>

    $('.instagram_nav_next').on('click', function() {
        <?php $instagram_count_next++;
        $ig_next_img = $instagram_array[$instagram_count_next]; ?>
        $('#insta_next').attr('src', '<?php print $ig_next_img; ?>');
    });

</script>

我非常感谢任何见解！非常感谢你！

Answer 1

我看了网站。如果$instagram_array是该网站中打印的数组，那么

您希望将此<?php print $ig_next_img; ?>更改为：

var i=0;
$('.instagram_nav_next').on('click', function() {        
    <?php $instagram_count_next++;
    $ig_next_img = $instagram_array[$instagram_count_next]; ?>
    $('#insta_next').attr('src', $instagram_array[i];);
    i++;
});

jQuery .on（'click'...事件只触发一次

1 个答案: