Question

我有一个宽度为226px或300px的图像列表。我想在图像宽度较小的情况下更改css，226px。这是“加号”的正确值，应该改变

HTML如下所示：

        <div class="item-image">
            <div class="plus-wrapper">
                <div class="plus"></div>
                <img src="source_to_image" alt="">
            </div>
        </div>

它是一个循环所以它将显示几个图像。

到目前为止，我的JS + jQuery看起来像这样：

        var image = $('.plus-wrapper img');
        image.each(function () {
            var that = $(this);
            if (that.width() < 250) {
                that.next('.plus').css('right', '41px');
            }
        });

但CSS没有改变。知道我做错了吗？

Answer 1

将您的代码更改为

$(window).load(function(){
    var image = $('.plus-wrapper img');
        image.each(function () {
            var that = $(this);
            if (this.width < 250) {
                that.prev().css('right', '41px');
            }
        });
});

更改

使用this.width，因为图片具有自己的width属性..
使用.prev()代替.next()，因为div是DOM中的前一个元素
调用window.load事件中的所有内容以确保图像已加载（，因此它们具有宽度）

Answer 2

您应该使用siblings选择器

    var image = $('.plus-wrapper img');
    image.each(function () {
        if ($(this).width() < 250) {
            $(this).siblings('.plus').css({'right' : '41px'});
        }
    });

根据图像宽度将类添加到图像

2 个答案: