如何正确地编写这个嵌套的jQuery命令？

Question

我需要像这样的东西：

function Splitter() {
    if ($(window).width() < 350) OR ($('#right-area').width() < 600) {
        $('.grid-item').css("width", "100%")
    }
    if ($(window).width() < 800) OR ($('#right-area').width() < 800) {
        $('.grid-item').css("width", "50%")
    }
    else {
        $('.grid-item').css("width", "33.3333%")
    }
}

怎么写才是正确的呢？如果我用||替换OR，它也不能工作。

Answer 1

你应该尝试一下：

function Splitter() {
    if (($(window).width() < 350) || ($('#right-area').width() < 600)) {
        $('.grid-item').css("width", "100%")
    }
    if (($(window).width() < 800) || ($('#right-area').width() < 800)) {
        $('.grid-item').css("width", "50%")
    } else {
        $('.grid-item').css("width", "33.3333%")
    }
}

我以为你在语句中忘记了"(“或")”

Answer 2

使用if时，所有对应的条件都必须包含在一组括号中。

请考虑以下几点：

if (a) || (b)   // invalid
if (a || b)     // valid
if ((a) || (b)) // valid

另外，我认为你的逻辑有点不对劲。

假设$(window).width()是200。

第一个条件为真，因此将$(".grid-item")设置为width: 100%。

第二个if也是 true，因此$(".grid-item")被设置为width: 50%。

不存在$('.grid-item').css("width", "100%")触发并不立即被$('.grid-item').css("width", "50%")覆盖的情况。

我相信这可能更符合你正在寻找的东西：

function Splitter() {
    if ($(window).width() < 350 || $('#right-area').width() < 600) {
        $('.grid-item').css("width", "100%")
    }
    else if ($(window).width() < 800 || $('#right-area').width() < 800) {
        $('.grid-item').css("width", "50%")
    }
    else {
        $('.grid-item').css("width", "33.3333%")
    }
}

Answer 3

我建议你使用另一种方法。您可以尝试在函数回调中使用jQuery#css：

​

var banner = $("#banner-message")
banner.css('width', () => {
	const	windowWidth = $(window).width();
	const rightAreaWidth = $('#right-area').width();
	return windowWidth < 350 || rightAreaWidth < 600 ? '100%' : windowWidth < 800 || rightAreaWidth < 800 ? '50%' : '33%';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
</div>

​