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

【问题标题】：How is it correct to write this nested jQuery command?编写这个嵌套的 jQuery 命令如何正确？
【发布时间】：2019-07-01 00:58:42
【问题描述】：

我需要类似的东西：

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 替换为||，它也不起作用。

【问题讨论】：

在不知道自己的目标是什么的情况下，很难确定“正确”是什么意思。但是，我想第二个if 应该是else if。没有它，您的第一个 if 将始终被第二个覆盖，因为没有第一个为真但第二个不是的条件。（和|| 而不是OR）
嗯。这没用。 ://
你的括号也不正确。您需要将整个条件集封装在一组括号中，或解开各个条件，例如：if ($(window).width() < 350) || $('#right-area').width() < 600)，用于两个 if ( ... ) 块。
你指的是哪个括号？
if 必须将其所有条件包含在一组括号中。但是，您的 if 语句如下所示：if (a) || (b)，这是无效的。它需要是if ( (a) || (b) ) 或 if (a || b)

标签： javascript jquery jquery-masonry gridsplitter

【解决方案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%")
    }
}

我以为你在语句中忘记了“（”或“）”

【讨论】：

任务是缩小这个命令：function Splitter() { if ($('#rechts').width() < 600) { $('.grid-item').css("width", "100%") } else if ($('#rechts').width() < 800) { $('.grid-item').css("width", "50%") } else { $('.grid-item').css("width", "33.3333%") } if ($(window).width() < 800) { $('.grid-item').css("width", "50%") } if ($(window).width() < 350) { $('.grid-item').css("width", "100%") } } 这里的问题是命令在某些情况下是矛盾的。
逻辑上这仍然没有意义。 $(window).width() 或 $('#right-area').width() 没有可能的值，其中第一个条件不会被第二个条件覆盖。
那你会怎么写呢？

【解决方案2】：

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

考虑以下几点：

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

另外，我相信你的逻辑有点不对劲。

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

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

第二个if 也为真，所以$(".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%")
    }
}

【讨论】：

啊，太好了！这真的很有帮助。但是还有一个问题：如果窗口大小在 600px 以下，网格项的宽度是 100%，但只要窗口大小不小于 350px，它们应该是 50%。是否可以在那里添加 »!important«？
代码按照您的建议执行。如果窗口宽度在350 和800 之间，它将被设置为50%（忽略$('#right-area').width() 部分）。
我的页面被一个可调整大小的 jQuery 拆分器分成两部分。右侧是砌体图像网格库。如果窗口大小低于 800 像素，则“右侧部分”垂直排列在“左侧部分”下方。使用您的代码，一切正常。如果我调整拆分器位置的大小，图像会正确排列。但是：如果我将窗口大小调整到 800 像素以下，图像是 100% 宽，但在这种情况下它们应该是 50%。
在窗口大小在800px以下但图片停留在100%宽度的情况下，$('#right-area')的宽度是多少？如果是< 600，您的条件将保持width: 100%。
如果窗口大小小于 800px，#right-area 将与窗口大小保持相同的宽度。你知道如何解决这个问题吗？ $(window).width() 命令应该比 $('#right-area').width() 命令更重要。

【解决方案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>

【讨论】：