Как event.target.closest совместить с if?

FrolovSite,

$(document).on('change', 'input.variable_manage_stock', function (event) {
			const variation = event.target.closest('.woocommerce_variation');
			const checkbox = event.target;
			const checkbox_on_off = checkbox.checked;
			if (checkbox_on_off && variation){ // Управление запасами включено
        console.log('включен')
				$('.show_if_variation_manage_stock select').on('change', function() { 
					$(document).on('change', '.show_if_variation_manage_stock select', function (event) {
						const variation = event.target.closest('.woocommerce_variation');
						const select = event.target;
						const showDate = select.matches('[name*="variable_backorders"]') && ['notify', 'yes'].includes(select.value); 
						variation.querySelector('.ps-date-var').classList.toggle('visible', showDate);
					});
				}).trigger('change');
			}
			else if (!checkbox_on_off && variation){ // Управление запасами отключено
        console.log('выключен')
				$('.variable_stock_status select').on('change', function() { 
					$(document).on('change', '.variable_stock_status select', function (event) {
						const variation = event.target.closest('.woocommerce_variation');
						const select = event.target;
						const showDate = select.matches('[name*="variable_stock_status"]') && 'onbackorder' === select.value;
						variation.querySelector('.ps-date-var').classList.toggle('visible', showDate);
					});
				}).trigger('change');
			}

		}).trigger('change');

Как event.target.closest совместить с if?

FrolovSite, Твой подход хитрый мне вообще не нравится, задал 1 вопрос и на него получил ответ. Тут же говоришь что какая-то там проблема у тебя, ну я попробую только какая проблема ?)

Глобальная переменная не видна в setTimeout. Почему?

либо через доп переменную

if (isThis.style.backgroundImage == target.parentNode.querySelector(".face").style.backgroundImage){
               let linkvariable =  isThis; 
                setTimeout(() => linkvariable .parentNode.remove(), 1000); 
                setTimeout(() => target.parentNode.remove(), 1000); 

                 isThis = undefined; 
            }

но честно хз сработает ли или нет, так как живого примера не вижу

Глобальная переменная не видна в setTimeout. Почему?

Я примерно понял зачем ты пытался юзал IIFE, хотел что бы твоя переменная isThis внутри данного кода

setTimeout((() => isThis.parentNode.remove())(), 1000);

была доступа через 1 секунду задержки но это не так работает, тебе надо изучить event loop хотя бы немного

Проблема в том что твой код

isThis = undefined; // отрабатывал быстрее чем setTimout когда твой setTimout был без IIFE

поэтому в setTimout переменная isThis = undefined

ну нужно в неё передавать IIFE тогда толку от твоего setTimeout тут не будет

вариант решения самый простой

setTimeout(() => {
                     isThis.parentNode.remove();
                     isThis = undefined;
                }, 1000);

То есть

if (isThis.style.backgroundImage == target.parentNode.querySelector(".face").style.backgroundImage){               
                setTimeout(() => {
                     isThis.parentNode.remove();
                     isThis = undefined;
                }, 1000); 
                setTimeout(() => target.parentNode.remove(), 1000);        
            }

и кстати тут можно всё это запихать в один setTimout с задержкой 1000

но наверное не всё так просто и я что-то не улавливаю и код который я предложил будет не актуален по каким-то причинам типа открытия уже следующих карт ?)

Как мне поменять расположение блоков если они находятся в других элементах?

только костылями либо меняй разметку

Есть ли способ сократить запись?

20 или 30

никто не пишет столько атрибутов, даже самые отчаянные
хватит и одного атрибута data-id="123" что бы потом в массиве найти этот объект и выдёргивать его поля когда нужно для отображения

а если это задание учебное, то забей огромный болт на него

либо так

for(const inf of obj){
  let d = document.createElement("div");
    for (const [key, value] of Object.entries(inf)) {
      d.dataset.[key] = value;
    }
}

Почему при реализации JWT на фронте access токен должен отправлять именно в заголовках, а не в куках?

я по разному делал, бывало вообще и access и refresh токены в localStorage сохранял, бывало и оба токена в куках сохранял, бывало access в localStorage а refresh в куки

можешь делать так как хочешь ты, но безопаснее будет и access и refresh хранить в куках с флагом httpOnly

Почему во всех статья рекомендуют сохранять access токен фронт в куках и потом прикреплять к запросам к API в заголовках, а не так как я описал выше?

не знаю кто там чё рекомендует, но доступа к кукам с фронта нет если куки установлены с флагом httpOnly

Как восстановить доступ к VPS?

а ошибку вообще выдает какую-то ?

Как в next.js обрабатывать URL страницы первого уровня?

Станислав,

_app.js
_document.js
index.js
[users].js
profile.js - Эта страница не будет работать мне кажется, потому что на любой роут будет отвечать страница с идентификатором [users]
blogs.js - и эта страница не будет работать

может перед тобой стоит задача а ты её не верными путями решать собрался, ты же не рассказываешь, так что делай как хочешь

Как в next.js обрабатывать URL страницы первого уровня?

Станислав, думаю у тебя будут проблемы, у тебя не будут работать ни какие страницы а если и будут то от этого будут потом проблемы, потому что у тебя на любой роут будет отвечать эта страница, потому что [users] это идентификатор

Как в next.js обрабатывать URL страницы первого уровня?

Станислав, localhost:3000/users

что бы был доступен этот роут, нужно в папке pages создать папку users и внутри папки users создать index файл - он и будет страницей users или что-то недопонимаю ?

Как в next.js обрабатывать URL страницы первого уровня?

Что ты планируешь сделать ? Может и не нужно обрабатывать роут, поэтому и спрашиваю.
А так там в next.js можно кастомный сервер написать который относится к отдаче фронта и обработать запросы.

custom server next.js

Не могу разобраться, при скролле не добавляется/удаляется класс. Что не так?

Максим, ну высчитывать пиксели экрана тоже как вариант, а так лучше конечно через intersectionRatio как-то отследить, в любом случае удачи а я спать

Не могу разобраться, при скролле не добавляется/удаляется класс. Что не так?

Максим, ну на счёт document.body это да , тут мой косяк), всё пора спать деточки

Не могу разобраться, при скролле не добавляется/удаляется класс. Что не так?

Максим, нук попробуй

const targetNavbarDesktop = document.querySelector('.fixed-navbar-desktop');
const targetNavbarMobile = document.querySelector('.fixed-navbar-mobile');
const fixedNavbarDesktop = document.querySelector('.navbar');
const fixedNavbarMobile = document.querySelector('.navbar');
const obFixedNavbar = new IntersectionObserver(obCallback);

let previousY = 0;
let previousRatio = 0

function obCallback(payload) {
  const currentY = payload[0].boundingClientRect.y;
  const currentRatio = payload[0].intersectionRatio
  const isIntersecting = payload[0].isIntersecting;
  
    if (currentY < previousY && isIntersecting) {
      document.querySelector('.header').style.marginBottom = fixedNavbarMobile.offsetHeight + 'px';
      fixedNavbarMobile.classList.add('navbar_fixed');
      if (currentRatio < previousRatio) {
        fixedNavbarMobile.classList.add('scroll-up'); // Появится при скролле вверх
      } 
    } else if(currentY > previousY && isIntersecting) {
         if(currentRatio > previousRatio){
            fixedNavbarMobile.classList.remove('scroll-up'); 
         }
    }

    previousY = currentY
    previousRatio = currentRatio
}

if (document.documentElement.clientWidth > 992) {
  obFixedNavbar.observe(targetNavbarDesktop);
} else {
  obFixedNavbar.observe(targetNavbarMobile);
}

Не могу разобраться, при скролле не добавляется/удаляется класс. Что не так?

Максим, когда тебе нужно вешать класс, когда блок полностью весь виден или когда часть его или вообще когда только только к нему скролишь ?

Интересно, какую чушь

- название параметра - чушь ( payload )

Не могу разобраться, при скролле не добавляется/удаляется класс. Что не так?

Параметры ты не указал

const obFixedNavbar = new IntersectionObserver(obCallback, 
{     
root: document.body,
rootMargin: '300px',
threshold: 0.5
});

Как расположить блок с кнопкой "добавить в избранное"?

<div class="block">
    <div class="box">
      <div class='image'></div>
      <div class="info">
        <div class="fav-icon"></div>
      </div>
    </div>

    <div class="box">
      <div class='image'></div>
      <div class="info">
        <div class="fav-icon"></div>
      </div>
    </div>

    <div class="box">
      <div class='image'></div>
      <div class="info">
        <div class="fav-icon"></div>
      </div>
    </div>
  </div>

.block {
  display: grid;
  grid-auto-rows: 100px;
  gap: 20px;
  margin: 0 auto;
  padding: 20px;
  width: 500px;
  border: 1px solid black;
  height: 500px;
}

.box {
  display: flex;
  width: 100%;
  border: 1px solid black;
  margin: 0 auto;
  background-color: lightblue;
}

.box:nth-child(odd) {
  flex-direction: row-reverse;
}

.image {
  width: 30%;
  height: 100%;
  background-color: lightgreen;
}

.image:nth-child(odd) {
  right: 620px;
}

.info{
  width: 100%;
  height: 100%;
  position: relative;
}
.fav-icon{
  width: 20px;
  height: 20px;
  background-color: white;
  position: absolute;
  right: 0;
  top: 0;
}

Как сделать что бы текст картинки был виден на первом экране?

Сергей Хлопов, либо object-fit: fill; если не один из вариантов не поможет, тогда хз

Как сделать что бы текст картинки был виден на первом экране?

Сергей Хлопов, убери вообще object-fit и тогда возможно будет то что ты хочешь