활성 클래스를 사용하여 그라디언트 견본에 편집 기능을 설정하려고 할 때 약간의 문제가 있습니다. 활성 클래스가 루프에서 OK로 설정되는 동안 현재 활성 클래스에 대한 후속 onlick 기능이 수행되지 않습니다. 아래 코드는 다음과 같습니다.
editSwatch() {
// Get the container element
let gradDiv = document.getElementById("swatch");
gradDiv.addEventListener("click", function () {
let current = gradDiv.getElementsByClassName("active");
// If there's no active class
if (current.length > 0) {
current[0].classList.add('active');
}
// Add the active class to the current/clicked div
this.classList.add('active');
this.current.addEventListener('click', function () {
console.log("Current Div is active");
})
});
},
Current는 약간의 테두리로 강조 표시되고 다른 모든 항목에서 하나씩 작동하지만 콘솔에서 메시지를 로그 아웃하지 않습니다. 또 다른 문제는 마우스를 멀리 움직일 때 활성이 고정되지 않고 편집 및 삭제 기능을 설정하는 데 지속성이 필요하다는 것입니다.
CSS는 여기
#bg-gradient:hover,
#bg-gradient.active {
border: solid 3px rgba(84, 112, 155, 0.7);
}
감사
나는 당신이 this.current대신 사용하고 있다고 생각합니다 current[0]. 아래 스 니펫이 도움이 될 것입니다.
function editSwatch() {
let gradDiv = document.getElementById("swatch");
console.log('clicked dev');
gradDiv.addEventListener("click", function () {
let current = gradDiv.getElementsByClassName("active");
console.log(current);
if (current.length > 0) {
current[0].classList.add('active');
}
current[0].addEventListener('click', function () {
console.log("Current Div is active");
})
});
}
editSwatch();
이것이 잘 작동하기를 바랍니다. this여기서 범인 이라고 생각 합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다