javascript - 为什么“产品快速查看”JavaScript 插件会影响非操作触发的部门？
问题描述
我对网页设计很陌生，我正在为我的网站使用“产品快速查看”插件。
如果您查看链接并单击 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文件夹中的animateQuickView函数。
此代码属于：main.jsmain.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 文件等）可以在这个链接中找到
任何帮助，将不胜感激。
解决方案
为每个项目添加一个带有 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
推荐阅读
- database - 关于大学LIBSYS系统的一些问题
- javascript - Node.js HTTP - TypeError：标头名称必须是有效的 HTTP 令牌
- r - 如何根据许多虚拟变量在 R 中生成比例数据框？
- java - 嵌套递归类型
- powerbi - 实施过滤器时，显示没有数据的项目不起作用。Power BI 桌面
- php - 使用 Laravel 进行测试时，如何在生产环境中使用 MySQL 和 sqlite 搜索连接字段
- android - Android Oreo GCM 推送通知图标白色，当应用程序关闭时
- c++ - 获取许多任何内置类型的低部分
- arrays - 将对象数组转换为字符串数组
- mysql - MySQL 数据库说明