如果X = width和X = height,JS图像检测不会为图像添加类 [英] JS image detect won't addClass for image if X = width and X =height
问题描述
我有以下脚本。 每个时间
'mobile-carousel-container'
加载 'item
'它找到'item'
---的类名的 div
if 'item'
hasClass
of' active'
应用基于图像的特定类如果是特定的
宽度和高度。
我运行的问题into,是我知道一些伸手可及的DOM不是检查每个'项',所以它找到一个与'活动'的当前状态,并简单地应用它 - 我想要它做它每次一个图像幻灯片通过轮播
I have the following script below. What is currently does, for each
time the 'mobile-carousel-container'
loads an 'item
' it finds the div
with the classname of 'item'
--- if
'item' hasClass
of 'active'
it then applies specific class based to the image
if is a specific width and height.
The problem I am running into, is the DOM I know for some reach is not checking each 'item' and so it finds the one with the current state of 'active' and simply applies it -- I want it to do it EVERYTIME an images slides through the carousel -- not just that one instance.
想法?
http://codepen.io/anon/pen/Xdjpyr
// everytime this carousel loads do this
$('.mobile-carousel-container').each(function() {
// find the carousel item -- declare variable
var imgs = $('.item');
// for each item function do this --
imgs.each(function() {
// if item hasClass 'active' -- do this
if ($(imgs).hasClass('active')) {
// img is this instance
var img = $(this);
// check ALL ifs if any dimensions match image dimensions
// if this addClass 'top'
if (img.width() == 320 && img.height() == 50 || // 300 x 250
img.width() == 300 && img.height() == 100 || // 300 x 100
img.width() == 300 && img.height() == 50 || // 300 x 50
img.width() == 250 && img.height() == 250 || // 250 x 250
img.width() == 728 && img.height() == 90 || // 729 x 90
img.width() == 468 && img.height() == 60 || // 468 x 60
img.width() == 240 && img.height() == 400 || // 240 x 400
img.width() == 180 && img.height() == 150 || // 180 x 150
img.width() == 125 && img.height() == 125 || // 125 x 125
img.width() == 234 && img.height() == 60 || // 234 x 60
img.width() == 120 && img.height() == 60) // 120 x 60
{
img.addClass('top');
}
// if this addClass 'bottom'
if (img.width() == 930 && img.height() == 180 || // 930 x 180
img.width() == 336 && img.height() == 280 || // 336 x 280
img.width() == 234 && img.height() == 60) // 234 x 60
{
img.addClass('bottom');
}
// if this addClass 'middle'
if (img.width() == 300 && img.height() == 250) // 300 x 250
{
img.addClass('middle');
}
// if this addClass 'right'
if (img.width() == 300 && img.height() == 250 || // 300 x 250
img.width() == 120 && img.height() == 600 || // 120 x 600
img.width() == 160 && img.height() == 600) // 600 x 160
{
img.addClass('right');
}
}
});
});
推荐答案
$("#carousel-container-mobile, #carousel-container-desktop").on('slid.bs.carousel', function() {
$('.item').each(function() {
var img = $('img', this);
if (img.width() == 320 && img.height() == 50 || // 300 x 250
img.width() == 300 && img.height() == 100 || // 300 x 100
img.width() == 300 && img.height() == 50 || // 300 x 50
img.width() == 250 && img.height() == 250 || // 250 x 250
img.width() == 728 && img.height() == 90 || // 729 x 90
img.width() == 468 && img.height() == 60 || // 468 x 60
img.width() == 240 && img.height() == 400 || // 240 x 400
img.width() == 180 && img.height() == 150 || // 180 x 150
img.width() == 125 && img.height() == 125 || // 125 x 125
img.width() == 234 && img.height() == 60 || // 234 x 60
img.width() == 120 && img.height() == 60) // 120 x 60
{
img.addClass('top');
}
if (img.width() == 930 && img.height() == 180 || // 930 x 180
img.width() == 336 && img.height() == 280 || // 336 x 280
img.width() == 234 && img.height() == 60) // 234 x 60
{
img.addClass('bottom');
}
if (img.width() == 300 && img.height() == 250) // 300 x 250
{
img.addClass('middle');
}
if (img.width() == 300 && img.height() == 250 || // 300 x 250
img.width() == 120 && img.height() == 600 || // 120 x 600
img.width() == 160 && img.height() == 600) // 600 x 160
{
img.addClass('right');
}
});
});
这篇关于如果X = width和X = height,JS图像检测不会为图像添加类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!