Как правильно написать эту вложенную команду 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

Я бы посоветовал вам использовать другой подход.Вы можете попробовать использовать 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>

Answer 3

При использовании 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%")
    }
}