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 validateData() {

    let sesion = @ViewData["Session"];

    if (sesion == 0) {
        Swal.fire({
            type: 'error',
            title: 'Oops...',
            text: '¡Usted no ha iniciado sesión!',
            footer: '<a asp-controller="Home" asp-action="Login">Iniciar sesión</a>'
        })

    }
}

我以为您在声明中忘记了“（”或“）”

Answer 2

使用if时，必须将所有对应的条件包装在单个括号中。

请考虑以下内容：

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

此外，我相信您的逻辑有些偏离。

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

您的第一个条件为true，因此$(".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>

编写此嵌套jQuery命令如何正确？

3 个答案: