javascript - jquery向一个元素添加多个css类

标签 javascript jquery html css

所以我正在尝试将另一个名为 popup 的 css 类添加到 .each 函数。

jQuery:

$.each(data.photos.photo, function(i, photo) {
        var imgURL = 'http://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_n.jpg';

        console.log(imgURL);

        // Pre-cache image
        $('<img />').attr({'src': imgURL, 'data-image-num': i}).load(function() {
           console.log('image loaded');
           var imageDataNum = $(this).attr('data-image-num');
           $('#photo-' + imageDataNum).css('background-image', 'url(' + imgURL + ')').removeClass('fade-out').addClass('fade-in');
        });

     });

CSS

.popup
{
position:absolute;
top:0px;
left:0px;
margin:100px auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
display:none
}

谢谢你的帮助,顺便说一句,这是我的第一篇文章,如果我听起来很笨,很抱歉。

最佳答案

...
$('#photo-' + imageDataNum).css('background-image', 'url(' + imgURL + ')').removeClass('fade-out').addClass('fade-in').addClass('popup');
...

    $('<img />').attr({'src': imgURL, 'data-image-num': i}).load(function() {
       console.log('image loaded');
       var imageDataNum = $(this).attr('data-image-num');
       $('#photo-' + imageDataNum).css('background-image', 'url(' + imgURL + ')').removeClass('fade-out').addClass('fade-in');
    }).addClass('popup');

关于javascript - jquery向一个元素添加多个css类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19601476/

相关文章:

JavaScript 基于复选框切换 DIV

javascript - 单击链接时在跨度上切换类

jquery - 隐藏 Boostrap 列表组元素

jquery - 单击 css 类后获取最近的 iframe 的 src

javascript - jQuery - 如何创建可撤消的操作?

javascript - 图像幻灯片和复习

javascript - 仅假单选按钮 1 选项

javascript - jQuery .fadeOut() 阻止 div 下

html - 使用 CSS 动画缩放居中的 div 时的不稳定行为

javascript - jQuery悬停功能显示覆盖但在悬停显示内容时关闭