Question

我有一个列出所有产品的猫头鹰轮播，每张图片都会显示一页。我希望保存一个cookie，因此当用户点击图像然后决定返回时，轮播将记住用户在旋转木马中的位置。

示例：用户点击幻灯片编号5并进入其单页，改变主意，返回，然后幻灯片编号5位于轮播中的第一位置。我有意义吗？

轮播的代码是：

<div class="loop owl-carousel owl-theme">
    <div class="item" id="<?php the_title();?>">
        <a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>">
            <div class="image-container <?php if( get_field('full-image') ): ?> full-image <?php endif; ?>">
                <?php the_post_thumbnail(); ?>

                <div class="hover-bg"></div>
                <div class="hover-text">
                    <p><?php the_field('short');?></p>
                    <p style="margin-top: 20px !important;"><?php the_field('procent');?></p>
                </div>
            </div>
            <p><?php the_title(); ?></p>
        </a>
    </div>
</div>

我如何从这里拿走它？

Answer 1

我会使用localStorage而不是cookies。这是一个jQuery解决方案。

＆＃13;

<script>

//CHECKS WHETHER OR NOT THERE'S A KEY/VALUE PAIR NAMED 'mostRecentPic' STORED IN localStorage. IF NOT THEN ON CLICKING A CAROUSEL IMAGE THE VALUE OF ITS SOURCE ATTRIBUTE IS STORED IN A KEY/VALUE PAIR IN localStorage, WITH THE KEY BEING 'mostRecentPic'. ELSE IF THE KEY/VALUE PAIR ALREADY EXISTS THE VALUE OF THE KEY (THE VALUE OF THE SRC ATTRIBUTE) IS ASSIGNED AS THE VALUE OF THE SRC ATTRIBUTE OF THE FIRST IMAGE IN THE CAROUSEL. 

if (!localStorage.getItem("mostRecentPic")) {
 		 $(".owl-carousel img").click( function() {
 	      localStorage.setItem("mostRecentPic", $(this).attr("src"));
    });
 } else {
 	    $(".owl-carousel img:first-child").attr("src", localStorage.getItem("mostRecentPic"));
 }
 
 </script>

＆＃13;

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

＆＃13;

在OwlCarousel幻灯片项jquery上保存cookie

1 个答案: