代码之家 › 专栏 › 技术社区 › masouduut94

为什么“产品快速查看”JavaScript插件会影响非动作触发的部门?

plugins css html javascript

masouduut94 · 技术社区 · 6 年前

"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 最后一个部门的第一个部门(即使你有很多部门的项目快速信息风格)。
我想问题在于 animateQuickView main.js 在javascript文件夹中。
此代码属于 主.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

任何帮助都将不胜感激。

1 回复 | 直到 6 年前

Saeed 6 年前

为每个项目添加一个带有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 -->

        <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标记的ref,然后在animateQuickView中快速更改add ref属性并将其传递给函数。

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