点击产品

Question

我正在导入并使用Product Quick View中的codyhouse.co。我想使用这个代码模板，在点击“。

时打开正确的内容

主要问题是，当我点击一个内容时，它会同时打开所有内容窗口。因此，当首先打开时，它会打开所有内容，并显示产品的最后内容。

内容将从MySQL数据库，Product_Name等加载。

<ul class="cd-items cd-container">
    <li class="cd-item" >
        <img src="images/<?=$id;?>_1.jpg" alt="Item Preview">
        <a class="cd-trigger" href="#content-<?=$row['id'];?>"><?=$row['Product_Name']?></a>
    </li> <!-- cd-item -->
</ul>    
<div class="cd-quick-view" id="content-<?=$row['id'];?>" >
    <div class="cd-slider-wrapper">
        <ul class="cd-slider">
            <li><!-- Images --></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><?=$row['Product_Name']?></h2>
        <p>Price: <?=$row['price']?>USD</p>

        <ul class="cd-item-action">
            <li><button class="add-to-cart">Buy</button></li>    
        </ul> <!-- cd-item-action -->
    </div> <!-- cd-item-info -->
    <a href="#0" id="content-<?=$id?>" class="cd-close">Close</a>
</div> <!-- cd-quick-view -->

从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();

    //close the quick view reverting the animation
    $('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,
    });
}
});

PHP;简单地连接到MySQL代码，我认为没有必要在这里展示，因为它得到的是正确的值，而不是PHP的错误，那就是没有用正确的内容打开一个窗口。所有数值都很好导入。：

<?php
include_once 'config.php';
$link = mysqli_connect("localhost", "USER", "LOGIN", "DATABSAE");

if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}


$sql = "SELECT * FROM Products";
if($result = mysqli_query($link, $sql)){
    if(mysqli_num_rows($result) > 0){
        while($row = mysqli_fetch_array($result)){

    $id = $row['id'];               
?>

<!-- HTML CODE, BUTTON FROM ABOVE -->

<?php
}
mysqli_free_result($result);
    } else{
        echo "No records matching your query were found.";
    }

} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
mysqli_close($link);
?>

任何想法，我缺少什么？

感谢。

Answer 1

试试这个js代码：

$('.cd-trigger').on('click', function(event){
    var selectedImage = $(this).parent('.cd-item').find('img'),
    selectedImageUrl = selectedImage.attr('src');

    $('body').addClass('overlay-layer');
    $(this).addClass('cd-visible'); // before missing dot in $() operator, now use this to run actions only in current element
    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(selectedImageUrl);
});