>source

window.matchMedia("(max-width: 1700px)") 를 사용하려고하는 친구들이여  페이지가 1700px 이하일 때 HTML에 일부 요소를 추가합니다. 지금은 기능 경고 'yo'를 화면에 표시하여 테스트하려고합니다. 이것은 내가 바꾸려고했던 다른 것들뿐만 아니라 작동하지 않습니까? 어떤 아이디어?

https://jsfiddle.net/yat5ncmk/6/

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
var x = window.matchMedia("(max-width: 1700px)");
let num = 1;
x.addEventListener(adjustMenuDesign);
adjustMenuDesign(x);
ham.addEventListener('click', function() {
	ham.classList.add('ham-open');
	menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
	ham.classList.remove('ham-open');
	menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
	num--;
	if(num > 0) {
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
		console.log(num);
		console.log(img.style.backgroundImage);
	} else {
		num = 4;
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
	}
})
rightArrow.addEventListener('click', function() {
	num++;
	if(num <= 4) {
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
		console.log(num);
		console.log(img.style.backgroundImage);
	} else {
		num = 1;
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
	}	
})
function adjustMenuDesign(width) {
    if (width.matches) { // If media query matches
	    alert('yo');
	} 
}
window.sr = ScrollReveal();
sr.reveal('.logo-wrap', {
	duration: 2000
});
sr.reveal('.w1', {
	duration: 2000,
	origin: 'bottom'
});
sr.reveal('.w2', {
	duration: 3000,
	origin: 'bottom'
});
sr.reveal('.w3', {
	duration: 4000,
	origin: 'bottom'
});
sr.reveal('.hours-line-left', {
	duration: 1000,
	origin: 'left',
	distance: '200px'
});
sr.reveal('.hours-line-right', {
	duration: 1000,
	origin: 'right',
	distance: '200px'
});
sr.reveal('.contact-line', {
	duration: 1000,
	origin: 'bottom',
	distance: '250px'
});
sr.reveal('.burrito', {
	duration: 1000,
	origin: 'right',
	distance: '250px'
});
sr.reveal('.taco', {
	duration: 1000,
	origin: 'right',
	distance: '250px'
});
sr.reveal('.guac', {
	duration: 1000,
	origin: 'right',
	distance: '250px'
});
sr.reveal('.nachos', {
	duration: 1000,
	origin: 'bottom',
	distance: '250px'
});
sr.reveal('.hot', {
	duration: 1000,
	origin: 'left',
	distance: '250px'
});
sr.reveal('.back-to-top', {
	duration: 1000,
	origin: 'bottom',
});
sr.reveal('.btp-arrow', {
	duration: 1500,
	origin: 'top',
	distance: '250px'
});

  • 답변 # 1

    몇 가지 문제 ..

    x.addEventListener(adjustMenuDesign);
    
    

    addEventListener가 이벤트 및 콜백을 예상하므로

    오류. 하지만 당신이해야 할 일은 이것을 크기 조정 이벤트에 추가하는 것이 었습니다 ..

    window.addEventListener("resize", adjustMenuDesign);
    
    

    또한 matchMedia 를 실행하고 싶을 것입니다  크기를 다시 조정하면 해당 코드를 adjustMenuDesign으로 이동하는 것이 좋습니다.

    아래는 이러한 변경 사항이 적용되는 바이올린입니다.

    https://jsfiddle.net/veckopab/

  • 이전 python - google colab에 pyaudio를 설치하지 못했습니다 - "오류 : pyaudio의 휠 제작 실패"
  • 다음 Salesforce에 대해 LTS (Lightning Testing Service)를 실행할 수 없음