javascript - 为什么 "Product Quick View"JavaScript 插件会影响不是由操作触发的分区？

标签 javascript html css plugins

我对网页设计还很陌生，我正在使用 "Product-Quick-View"我的网站的插件。
如果您查看链接并单击“DEMO”按钮并检查代码，您会看到如下内容:

<body>
    <header>
        <h1>Product Quick View</h1>
    </header>

    <ul class="cd-items cd-container">
        <li class="cd-item">
            <img src="img/item-1.jpg" alt="Item Preview"/>
            <a href="#0" class="cd-trigger">Quick View</a>
        </li>

        <li class="cd-item">
            <img src="img/item-1.jpg" alt="Item Preview"/>
            <a href="#0" class="cd-trigger">Quick View</a>
        </li>

        <li class="cd-item">
            <img src="img/item-1.jpg" alt="Item Preview">
            <a href="#0" class="cd-trigger">Quick View</a>
        </li>

        <li class="cd-item">
            <img src="img/item-1.jpg" alt="Item Preview"/>
            <a href="#0" class="cd-trigger">Quick View</a>
        </li>
    </ul>

    <div class="cd-quick-view">
        <div class="cd-slider-wrapper">
            <ul class="cd-slider">
                <li class="selected">
                    <img src="img/item-1.jpg" alt="Product 1"/>
                </li>
                <li>
                    <img src="img/item-2.jpg" alt="Product 2"/>
                </li>
                <li>
                    <img src="img/item-3.jpg" alt="Product 3"/>
                </li>
            </ul>

            <ul class="cd-slider-navigation">
                <li>
                    <a class="cd-next" href="#0">Prev</a>
                </li>
                <li>
                    <a class="cd-prev" href="#0">Next</a>
                </li>
            </ul>
        </div>

        <div class="cd-item-info">
            <h2>Produt Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione. Numquam eveniet quo, ullam itaque expedita impedit. Eveniet, asperiores amet iste repellendus similique reiciendis, maxime laborum praesentium.</p>

            <ul class="cd-item-action">
                <li>
                    <button class="add-to-cart">Add to cart</button>
                </li>
                <li>
                    <a href="#0">Learn more</a>
                </li>
            </ul>
        </div>
        <a href="#0" class="cd-close">Close</a>
    </div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/main.js"></script>
</body>

我这样修改了代码:

<div id="Num1">
    <ul class="cd-items cd-container">
        <li class="cd-item">
            <img src="img/item-1.jpg" alt="Item Preview"/>
            <a href="#0" class="cd-trigger">Quick View</a>
        </li>
    </ul>

    <div class="cd-quick-view">
        <div class="cd-slider-wrapper">
            <ul class="cd-slider">
                <li class="selected">
                    <img src="img/item-1.jpg" alt="Product 1"/>
                </li>
                <li>
                    <img src="img/item-2.jpg" alt="Product 2"/>
                </li>
                <li>
                    <img src="img/item-3.jpg" alt="Product 3"/>
                </li>
            </ul>

            <ul class="cd-slider-navigation">
                <li>
                    <a class="cd-next" href="#0">Prev</a>
                </li>
                <li>
                    <a class="cd-prev" href="#0">Next</a>
                </li>
            </ul>
        </div>

        <div class="cd-item-info">
            <h2>Produt Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione. Numquam eveniet quo, ullam itaque expedita impedit. Eveniet, asperiores amet iste repellendus similique reiciendis, maxime laborum praesentium.</p>

            <ul class="cd-item-action">
                <li>
                    <button class="add-to-cart">Add to cart</button>
                </li>
                <li>
                    <a href="#0">Learn more</a>
                </li>
            </ul>
        </div>
        <a href="#0" class="cd-close">Close</a>
    </div>
</div>
<div id="Num2">
    <ul class="cd-items cd-container">
        <li class="cd-item">
            <img src="img/item-4.jpg" alt="Item Preview"/>
            <a href="#0" class="cd-trigger">Quick View</a>
        </li>
    </ul>

    <div class="cd-quick-view">
        <div class="cd-slider-wrapper">
            <ul class="cd-slider">
                <li class="selected">
                    <img src="img/item-4.jpg" alt="Product 1"/>
                </li>
                <li>
                    <img src="img/item-5.jpg" alt="Product 2"/>
                </li>
                <li>
                    <img src="img/item-6.jpg" alt="Product 3"/>
                </li>
            </ul>

            <ul class="cd-slider-navigation">
                <li>
                    <a class="cd-next" href="#0">Prev</a>
                </li>
                <li>
                    <a class="cd-prev" href="#0">Next</a>
                </li>
            </ul>
        </div>

        <div class="cd-item-info">
            <h2>Produt Title</h2>
            <p>DIFFERENT DESCRIPTION Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione. Numquam eveniet quo, ullam itaque expedita impedit. Eveniet, asperiores amet iste repellendus similique reiciendis, maxime laborum praesentium.</p>

            <ul class="cd-item-action">
                <li>
                    <button class="add-to-cart">Add to cart</button>
                </li>
                <li>
                    <a href="#0">Learn more</a>
                </li>
            </ul>
        </div>
        <a href="#0" class="cd-close">Close</a>
    </div>
</div>

进行更改是因为分区 #Num1、#Num2 中的图像不同，我希望为每个产品获取不同的描述。
当您单击 cd-trigger。最后一个分区的 cd-item-info 会在第一个分区的 cd-item-info 上弹出(即使您有很多带有 item-quick-info 的分区)
我猜问题出在 javascript 文件夹中的 main.js 中的 animateQuickView 函数。
此代码属于 main.js:

jQuery(document).ready(function($){
//final width --> this is the quick view image slider width
//maxQuickWidth --> this is the max-width of the quick-view panel
var sliderFinalWidth = 400,
        maxQuickWidth = 900;

//open the quick view panel
$('.cd-trigger').on('click', function(event){
    var selectedImage = $(this).parent('.cd-item').children('img'),
        slectedImageUrl = selectedImage.attr('src');

    $('body').addClass('overlay-layer');
    animateQuickView(selectedImage, sliderFinalWidth, maxQuickWidth, 'open');

    //update the visible slider image in the quick view panel
    //you don't need to implement/use the updateQuickView if retrieving the quick view data with ajax
    updateQuickView(slectedImageUrl);
});

//close the quick view panel
$('body').on('click', function(event){
    if( $(event.target).is('.cd-close') || $(event.target).is('body.overlay-layer')) {
        closeQuickView( sliderFinalWidth, maxQuickWidth);
    }
});
$(document).keyup(function(event){
    //check if user has pressed 'Esc'
    if(event.which=='27'){
        closeQuickView( sliderFinalWidth, maxQuickWidth);
    }
});

//quick view slider implementation
$('.cd-quick-view').on('click', '.cd-slider-navigation a', function(){
    updateSlider($(this));
});

//center quick-view on window resize
$(window).on('resize', function(){
    if($('.cd-quick-view').hasClass('is-visible')){
        window.requestAnimationFrame(resizeQuickView);
    }
});

function updateSlider(navigation) {
    var sliderConatiner = navigation.parents('.cd-slider-wrapper').find('.cd-slider'),
        activeSlider = sliderConatiner.children('.selected').removeClass('selected');
    if ( navigation.hasClass('cd-next') ) {
        ( !activeSlider.is(':last-child') ) ? activeSlider.next().addClass('selected') : sliderConatiner.children('li').eq(0).addClass('selected'); 
    } else {
        ( !activeSlider.is(':first-child') ) ? activeSlider.prev().addClass('selected') : sliderConatiner.children('li').last().addClass('selected');
    } 
}

function updateQuickView(url) {
    $('.cd-quick-view .cd-slider li').removeClass('selected').find('img[src="'+ url +'"]').parent('li').addClass('selected');
}

function resizeQuickView() {
    var quickViewLeft = ($(window).width() - $('.cd-quick-view').width())/2,
        quickViewTop = ($(window).height() - $('.cd-quick-view').height())/2;
    $('.cd-quick-view').css({
        "top": quickViewTop,
        "left": quickViewLeft,
    });
} 

function closeQuickView(finalWidth, maxQuickWidth) {
    var close = $('.cd-close'),
        activeSliderUrl = close.siblings('.cd-slider-wrapper').find('.selected img').attr('src'),
        selectedImage = $('.empty-box').find('img');
    //update the image in the gallery
    if( !$('.cd-quick-view').hasClass('velocity-animating') && $('.cd-quick-view').hasClass('add-content')) {
        selectedImage.attr('src', activeSliderUrl);
        animateQuickView(selectedImage, finalWidth, maxQuickWidth, 'close');
    } else {
        closeNoAnimation(selectedImage, finalWidth, maxQuickWidth);
    }
}

function animateQuickView(image, finalWidth, maxQuickWidth, animationType) {
    //store some image data (width, top position, ...)
    //store window data to calculate quick view panel position
    var parentListItem = image.parent('.cd-item'),
        topSelected = image.offset().top - $(window).scrollTop(),
        leftSelected = image.offset().left,
        widthSelected = image.width(),
        heightSelected = image.height(),
        windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        finalLeft = (windowWidth - finalWidth)/2,
        finalHeight = finalWidth * heightSelected/widthSelected,
        finalTop = (windowHeight - finalHeight)/2,
        quickViewWidth = ( windowWidth * .8 < maxQuickWidth ) ? windowWidth * .8 : maxQuickWidth ,
        quickViewLeft = (windowWidth - quickViewWidth)/2;

    if( animationType == 'open') {
        //hide the image in the gallery
        parentListItem.addClass('empty-box');
        //place the quick view over the image gallery and give it the dimension of the gallery image
        $('.cd-quick-view').css({
            "top": topSelected,
            "left": leftSelected,
            "width": widthSelected,
        }).velocity({
            //animate the quick view: animate its width and center it in the viewport
            //during this animation, only the slider image is visible
            'top': finalTop+ 'px',
            'left': finalLeft+'px',
            'width': finalWidth+'px',
        }, 1000, [ 400, 20 ], function(){
            //animate the quick view: animate its width to the final value
            $('.cd-quick-view').addClass('animate-width').velocity({
                'left': quickViewLeft+'px',
                'width': quickViewWidth+'px',
            }, 300, 'ease' ,function(){
                //show quick view content
                $('.cd-quick-view').addClass('add-content');
            });
        }).addClass('is-visible');
    } else {
        //close the quick view reverting the animation
        $('.cd-quick-view').removeClass('add-content').velocity({
            'top': finalTop+ 'px',
            'left': finalLeft+'px',
            'width': finalWidth+'px',
        }, 300, 'ease', function(){
            $('body').removeClass('overlay-layer');
            $('.cd-quick-view').removeClass('animate-width').velocity({
                "top": topSelected,
                "left": leftSelected,
                "width": widthSelected,
            }, 500, 'ease', function(){
                $('.cd-quick-view').removeClass('is-visible');
                parentListItem.removeClass('empty-box');
            });
        });
    }
}
function closeNoAnimation(image, finalWidth, maxQuickWidth) {
    var parentListItem = image.parent('.cd-item'),
        topSelected = image.offset().top - $(window).scrollTop(),
        leftSelected = image.offset().left,
        widthSelected = image.width();

    $('body').removeClass('overlay-layer');
    parentListItem.removeClass('empty-box');
    $('.cd-quick-view').velocity("stop").removeClass('add-content animate-width is-visible').css({
        "top": topSelected,
        "left": leftSelected,
        "width": widthSelected,
    });
}
});

整个元素(包括Javascript、CSS文件等)可以在this link中找到

如有任何帮助，我们将不胜感激。

最佳答案

为每个元素添加一个具有 cd-quick-view 类的唯一 div，并使用不同的 id 标记它们。

<div id="first-item" class="cd-quick-view">
        <div class="cd-slider-wrapper">
            <ul class="cd-slider">
                <li class="selected"><img src="img/item-1.jpg" alt="Product 1"></li>
                <li><img src="img/item-2.jpg" alt="Product 2"></li>
                <li><img src="img/item-3.jpg" alt="Product 3"></li>
            </ul> <!-- cd-slider -->

            <ul class="cd-slider-navigation">
                <li><a class="cd-next" href="#0">Prev</a></li>
                <li><a class="cd-prev" href="#0">Next</a></li>
            </ul> <!-- cd-slider-navigation -->
        </div> <!-- cd-slider-wrapper -->

        <div class="cd-item-info">
            <h2>First Item</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione. Numquam eveniet quo, ullam itaque expedita impedit. Eveniet, asperiores amet iste repellendus similique reiciendis, maxime laborum praesentium.</p>

            <ul class="cd-item-action">
                <li><button class="add-to-cart">Add to cart</button></li>                   
                <li><a href="#0">Learn more</a></li>    
            </ul> <!-- cd-item-action -->
        </div> <!-- cd-item-info -->
        <a href="#0" class="cd-close">Close</a>
    </div> <!-- cd-quick-view -->
    <div id="second-item" class="cd-quick-view">
        <div class="cd-slider-wrapper">
            <ul class="cd-slider">
                <li class="selected"><img src="img/item-1.jpg" alt="Product 1"></li>
                <li><img src="img/item-2.jpg" alt="Product 2"></li>
                <li><img src="img/item-3.jpg" alt="Product 3"></li>
            </ul> <!-- cd-slider -->

            <ul class="cd-slider-navigation">
                <li><a class="cd-next" href="#0">Prev</a></li>
                <li><a class="cd-prev" href="#0">Next</a></li>
            </ul> <!-- cd-slider-navigation -->
        </div> <!-- cd-slider-wrapper -->

        <div class="cd-item-info">
            <h2>Second Item</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione. Numquam eveniet quo, ullam itaque expedita impedit. Eveniet, asperiores amet iste repellendus similique reiciendis, maxime laborum praesentium.</p>

            <ul class="cd-item-action">
                <li><button class="add-to-cart">Add to cart</button></li>                   
                <li><a href="#0">Learn more</a></li>    
            </ul> <!-- cd-item-action -->
        </div> <!-- cd-item-info -->
        <a href="#0" class="cd-close">Close</a>
    </div> <!-- cd-quick-view -->

将这些 ID 作为 href 添加到 cd-trigger a 标签:href="#first-item"

        <li class="cd-item">
            <img src="img/item-1.jpg" alt="Item Preview">
            <a href="#first-item" class="cd-trigger">Quick View</a>
        </li> <!-- cd-item -->

        <li class="cd-item">
            <img src="img/item-1.jpg" alt="Item Preview">
            <a href="#second-item" class="cd-trigger">Quick View</a>
        </li> <!-- cd-item -->

首先在单击时获取 a 标签的 href，然后在 animateQuickView 中快速更改添加 href 属性并将其传递给函数。

var href = $(this).attr('href');

animateQuickView(selectedImage, sliderFinalWidth, maxQuickWidth, 'open', href);

之后，您应该将“.cd-quick-view”替换为打开动画部分的 href:

$(href).css({
    "top": topSelected,
    "left": leftSelected,
    "width": widthSelected,
}).velocity({
    //animate the quick view: animate its width and center it in the viewport
    //during this animation, only the slider image is visible
    'top': finalTop+ 'px',
    'left': finalLeft+'px',
    'width': finalWidth+'px',
}, 1000, [ 400, 20 ], function(){
    //animate the quick view: animate its width to the final value
    $(href).addClass('animate-width').velocity({
        'left': quickViewLeft+'px',
        'width': quickViewWidth+'px',
    }, 300, 'ease' ,function(){
        //show quick view content
        $(href).addClass('add-content');
    });
}).addClass('is-visible');

完整更改的文件: https://drive.google.com/file/d/1OC9uj8haP0t-EBGuJe1dwR4_5zjLq7T_/view?usp=sharing

关于javascript - 为什么 "Product Quick View"JavaScript 插件会影响不是由操作触发的分区？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51791748/

上一篇：javascript - Webpack:html-loader 无法解析 srcset 图像

下一篇：html - 同一行 bootstrap 4 上的导航栏品牌和移动下拉菜单

相关文章：

javascript - 如何使用 State Hook 在 React 中编写语义 UI 单选组？

javascript - 如何使用 jquery 在 highcharts 创建的饼图的每一 block 上添加不同的点击事件

javascript - 复选框 JavaScript 不更新值

html - 互联网浏览器 : Float and Clear Issues

html - 如何将 float 在一个 <div> 中的元素居中？

javascript - 重置 jquery 对象

html - 如何在 CSS 中实现响应式丝带形状？

html - CSS 网格神秘空白

javascript - 为什么当我刷新时数据库中只显示一项(Firebase)

javascript - 如何在 HTML 的特定部分添加和删除 'table'？

©2024 IT工具网  联系我们