我想用缩略图创建简单的产品滑块。虽然可能有超过3个缩略图,但我只想显示其中的3个。通过单击“更多”按钮,我的目标是隐藏已经可见的第一个图像,并通过更改其类别来显示隐藏图像中的图像。
代码工作正常,直到hiddenImages [0]。 Firefox控制台出现以下错误:“TypeError:hiddenImages [0]未定义”
我做错了什么?
// All images
var images = $('[data-image]');
// Click for more images
var more = $('.more');
// Add show class to all images
images.each(function(index, element){$(this).parent().addClass('visible')})
// Hide images begining from 4th image
images.each(function(index, element){if($(this).data('image') >= 4)
{$(this).parent().removeClass('visible').addClass('hidden')} })
// Show big image when clicking thumbnail
images.each( function(index, element){
$(this).click(function(){ $('#pic img').attr('src', $(this).attr('src')) }) })
// Hide 1st from visible images and show first from hidden images
more.on('click', function(){
// Find all hidden images and remove visible class from first one
hiddenImages = images.hasClass('hidden');
hiddenImages[0].removeClass('visible').addClass('hidden');
})
#pic {
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin-right: 5px;
float: left;
}
.thumbnails {
height: 300px;
width: 50px;
padding:0;
margin:0;
margin-right: 10px;
float: left;
}
.thumbnails li {
display: inline;
list-style: none;
float: left;
width: 70px;
height: 70px;
margin-bottom: 5px;
border:1px solid #ccc;
text-align: center;
}
.thumbnails li img {
width: 70px;
height: 70px;
cursor: pointer;
}
.more {
display: inline;
list-style: none;
float: left;
width: 70px;
height: 70px;
margin-bottom: 5px;
border:1px solid #ccc;
text-align: center;
}
.hidden {display: none!important;}
.visible {display: block!important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div id="pic">
<img src="https://placeimg.com/300/300/nature">
</div>
<ul class="thumbnails">
<li><img data-image="1" src="https://placeimg.com/300/300/nature"></li>
<li><img data-image="2" src="https://placeimg.com/300/300/any"></li>
<li><img data-image="3" src="https://placeimg.com/300/300/animals"></li>
<li><img data-image="4" src="https://placeimg.com/300/300/sepia"></li>
<li><img data-image="5" src="https://placeimg.com/300/300/grayscale"></li>
<li><img data-image="6" src="https://placeimg.com/300/300/tech"></li>
<li class="more">MORE</li>
</ul>
</div>
images.hasClass('hidden')
没有做你认为它做的事情。看看the hasClass()
docs。它返回一个布尔值。
假设您正在尝试使用该类获取对象数组,则需要使用find()
您还需要确认images.find('.hidden')
的结果返回预期长度的数组(下面未演示)。
more.on('click', function(){
// Find all hidden images and remove visible class from first one
hiddenImages = images.filter("[class~='hidden']");
hiddenImages[0].removeClass('visible').addClass('hidden');
})
这是一个简单的例子,用div来说明:
let divsWithClass = $("div").filter("[class~='hidden']")
alert(`divs with 'hidden' class: ${divsWithClass.length}`);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo1"></div>
<div class="foo1"></div>
<div class="foo1"></div>
<div class="foo1"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="foo1"></div>
<div class="foo1"></div>
<div class="foo1"></div>
正如在上面的答案中已经指出的那样问题是hasClass()
返回一个布尔而不是jQuery元素集,随后即使hasClass()确实返回说一组jQuery元素,你的下一行代码也会失败,因为hiddenImages[0]
是不是jQuery对象。下面是一个如何拥有3个活动图像并交换类的示例:
$(function() {
// All images
var images = $('[data-image]'),
// Click for more images
more = $('.more');
// Add show class to all images
images.each(function(index, element) {
$(this).parent().addClass('visible')
})
// Hide images begining from 4th image
images.each(function(index, element) {
if ($(this).data('image') >= 4) {
$(this).parent().removeClass('visible').addClass('hidden')
}
})
// Show big image when clicking thumbnail
images.each(function(index, element) {
$(this).click(function() {
$('#pic img').attr('src', $(this).attr('src'))
})
})
// Hide 1st from visible images and show first from hidden images
var hiddenElemInfoObj = {
idx: $('.thumbnails > li.hidden').first().index(),
initialIdx: $('.thumbnails > li.hidden').first().index(),
lengthOfElems: $('.thumbnails > li.hidden').length - 1 // To make length zero based
},
visibleElemInfoObj = {
idx: $('.thumbnails > li.visible').first().index(),
initialIdx: $('.thumbnails > li.visible').first().index(),
lengthOfElems: $('.thumbnails > li.visible').length - 1 // To make length zero based
}
more.on('click', function() {
$thumbnails = $('.thumbnails');
if (parseInt(hiddenElemInfoObj['idx']) > (parseInt(hiddenElemInfoObj['initialIdx']) + parseInt(hiddenElemInfoObj['lengthOfElems']))) {
hiddenElemInfoObj['idx'] = $('.thumbnails > li.hidden').first().index();
hiddenElemInfoObj['initialIdx'] = $('.thumbnails > li.hidden').first().index();
}
if (parseInt(visibleElemInfoObj['idx']) > (parseInt(visibleElemInfoObj['initialIdx']) + parseInt(visibleElemInfoObj['lengthOfElems']))) {
visibleElemInfoObj['idx'] = $('.thumbnails > li.visible').first().index();
visibleElemInfoObj['initialIdx'] = $('.thumbnails > li.visible').first().index();
}
$thumbnails
.children('li')
.eq(hiddenElemInfoObj.idx)
.removeClass('hidden')
.addClass('visible');
$thumbnails
.children('li')
.eq(visibleElemInfoObj.idx)
.removeClass('visible')
.addClass('hidden');
hiddenElemInfoObj['idx'] = parseInt(hiddenElemInfoObj['idx']) + 1;
visibleElemInfoObj['idx'] = parseInt(visibleElemInfoObj['idx']) + 1;
});
});
#pic {
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin-right: 5px;
float: left;
}
.thumbnails {
height: 300px;
width: 50px;
padding: 0;
margin: 0;
margin-right: 10px;
float: left;
}
.thumbnails li {
display: inline;
list-style: none;
float: left;
width: 70px;
height: 70px;
margin-bottom: 5px;
border: 1px solid #ccc;
text-align: center;
}
.thumbnails li img {
width: 70px;
height: 70px;
cursor: pointer;
}
.more {
display: inline;
list-style: none;
float: left;
width: 70px;
height: 70px;
margin-bottom: 5px;
border: 1px solid #ccc;
text-align: center;
}
.hidden {
display: none !important;
}
.visible {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div id="pic"><img src="https://placeimg.com/300/300/nature"></div>
<ul class="thumbnails">
<li><img data-image="1" src="https://placeimg.com/300/300/nature"></li>
<li><img data-image="2" src="https://placeimg.com/300/300/any"></li>
<li><img data-image="3" src="https://placeimg.com/300/300/animals"></li>
<li><img data-image="4" src="https://placeimg.com/300/300/sepia"></li>
<li><img data-image="5" src="https://placeimg.com/300/300/grayscale"></li>
<li><img data-image="6" src="https://placeimg.com/300/300/tech"></li>
<li class="more">MORE</li>
</ul>
</div>