javascript - 如何在 jquery 代码中使用它

Question

我在jquery中有一段代码如下:

if($('div').width()>150){

    $('#check').css('overflow-x', 'scroll');  
    $('#check').css('overflow-y', 'hidden'); 

}

我试图通过使用“this”关键字使这段代码更加具体，以便 css 属性仅应用于特定的 div。

<强> FIND THE FIDDLE HERE

谁能告诉我我做错了什么，因为“this”关键字在这种情况下不起作用。

Answer 1

您需要对所有 div 元素执行 width 检查。为此，您可以使用 filter 获取宽度满足要求的元素，然后为其设置 CSS:

$('div').filter(function() {
    return $(this).width() > 150;
}).css({ 
    'overflow-x': 'scroll',
    'overflow-y': 'hidden'
});

请注意，最好的做法是将类应用于元素，而不是直接更改 CSS，因为它可以更好地分离关注点:

$('div').filter(function() {
    return $(this).width() > 150;
}).addClass('horizontal-scroll');

.horizontal-scroll {
    overflow-x: scroll;
    overflow-y: hidden;
}