我正在练习Javascript和HTML，遇到了这个列表item/adpter like we call them in android。很好，但是我有挑战。我像这样将它们添加到我的div中
$.ajax(
{
type: "GET",
url: "../public/allevents/"+pn,
success: function(data){
console.log('Events Response::'+data);
var obj = jQuery.parseJSON(data);
for(event in obj.events){
console.log('Event:'+event);
$("#eventHolder").append(
'<div class="make-3D-space">'
+'<div id="product-card">'
+'<div class="product-front">'
+'<div class="shadow"></div>'
+'<img src="'+'..'+obj.events[event].image+'" alt="" />'
+'<div class="image_overlay"></div>'
+'<div id="view_details">View details</div>'
+'<div class="stats">'
+'<div class="stats-container">'
+'<span class="product_price">FREE</span>'
+'<span class="product_name">'+obj.events[event].title+'</span>'
+'<p>'+moment(obj.events[event].starts).utc().format('DD MMM, YY [at] hh:mm A')+'</p>'
+'<div class="product-options">'
+'<strong>LOCATION</strong>'
+'<span>'+obj.events[event].address+'</span>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>');
}
addViewListenersToadapters();
},
error: function(xhr, status, error) {
console.log('Events Response::'+xhr.responseText);
//swal("Error", "Error deleting, try again", "error");
}
}
)
他们添加的很好。但是扩展动画仅适用于第一项，据我所知，这是因为items使用单个id，因此Javascript找到了第一项并将动画应用到它。我有个主意，可以在添加项目时更改ids的项目，但是动画中的static javascript具有static ids，因此无论哪种方式都不能工作
function addViewListenersToadapters(){
$(document).ready(function(){
// Lift card and show stats on Mouseover
$('#product-card').hover(function(){
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, function(){
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
});
// Flip card to the back side
$('#view_details').click(function(){
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('#product-card').addClass('flip-10');
setTimeout(function(){
$('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
$('#product-front, #product-front div.shadow').hide();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip190');
$('#product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function(){
$('#product-card').css('transition', '100ms ease-out');
$('#cx, #cy').addClass('s1');
setTimeout(function(){$('#cx, #cy').addClass('s2');}, 100);
setTimeout(function(){$('#cx, #cy').addClass('s3');}, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, 100);
}, 100);
}, 150);
});
// Flip card back to the front side
$('#flip-back').click(function(){
$('#product-card').removeClass('flip180').addClass('flip190');
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip90');
$('#product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
$('#product-back, #product-back div.shadow').hide();
$('#product-front, #product-front div.shadow').show();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip-10');
$('#product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function(){
$('#product-front div.shadow').hide();
$('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('#cx, #cy').removeClass('s1 s2 s3');
}, 100);
}, 150);
});
/* ---- Image Gallery Carousel ---- */
var carousel = $('#carousel ul');
var carouselSlideWidth = 335;
var carouselWidth = 0;
var isAnimating = false;
// building the width of the casousel
$('#carousel li').each(function(){
carouselWidth += carouselSlideWidth;
});
$(carousel).css('width', carouselWidth);
// Load Next Image
$('div.carouselNext').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft + carouselSlideWidth;
if(newLeft == carouselWidth || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
// Load Previous Image
$('div.carouselPrev').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft - carouselSlideWidth;
if(newLeft < 0 || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
});
我该如何解决？再次成为一个学习者，我不知道该如何解决。
答案 0 :(得分：0)
您可以将类添加到＃product-cart div
$.ajax(
{
type: "GET",
url: "../public/allevents/"+pn,
success: function(data){
console.log('Events Response::'+data);
var obj = jQuery.parseJSON(data);
for(event in obj.events){
console.log('Event:'+event);
$("#eventHolder").append(
'<div class="make-3D-space">'
+'<div id="product-card" class="product-card">'
+'<div class="product-front">'
+'<div class="shadow"></div>'
+'<img src="'+'..'+obj.events[event].image+'" alt="" />'
+'<div class="image_overlay"></div>'
+'<div id="view_details">View details</div>'
+'<div class="stats">'
+'<div class="stats-container">'
+'<span class="product_price">FREE</span>'
+'<span class="product_name">'+obj.events[event].title+'</span>'
+'<p>'+moment(obj.events[event].starts).utc().format('DD MMM, YY [at] hh:mm A')+'</p>'
+'<div class="product-options">'
+'<strong>LOCATION</strong>'
+'<span>'+obj.events[event].address+'</span>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>');
}
addViewListenersToadapters();
},
error: function(xhr, status, error) {
console.log('Events Response::'+xhr.responseText);
//swal("Error", "Error deleting, try again", "error");
}
}
)
并且不要在内部函数async中使用$（document）.ready（），它永远不会触发。
function addViewListenersToadapters(){
// Lift card and show stats on Mouseover
$('.product-card').hover(function(){
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, function(){
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
});
// Flip card to the back side
$('#view_details').click(function(){
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('#product-card').addClass('flip-10');
setTimeout(function(){
$('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
$('#product-front, #product-front div.shadow').hide();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip190');
$('#product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function(){
$('#product-card').css('transition', '100ms ease-out');
$('#cx, #cy').addClass('s1');
setTimeout(function(){$('#cx, #cy').addClass('s2');}, 100);
setTimeout(function(){$('#cx, #cy').addClass('s3');}, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, 100);
}, 100);
}, 150);
});
// Flip card back to the front side
$('#flip-back').click(function(){
$('#product-card').removeClass('flip180').addClass('flip190');
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip90');
$('#product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
$('#product-back, #product-back div.shadow').hide();
$('#product-front, #product-front div.shadow').show();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip-10');
$('#product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function(){
$('#product-front div.shadow').hide();
$('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('#cx, #cy').removeClass('s1 s2 s3');
}, 100);
}, 150);
});
/* ---- Image Gallery Carousel ---- */
var carousel = $('#carousel ul');
var carouselSlideWidth = 335;
var carouselWidth = 0;
var isAnimating = false;
// building the width of the casousel
$('#carousel li').each(function(){
carouselWidth += carouselSlideWidth;
});
$(carousel).css('width', carouselWidth);
// Load Next Image
$('div.carouselNext').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft + carouselSlideWidth;
if(newLeft == carouselWidth || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
// Load Previous Image
$('div.carouselPrev').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft - carouselSlideWidth;
if(newLeft < 0 || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
}