자바스크립트 active 해제 하는 방법 채택완료
출처: https://codepen.io/yashnarola/pen/MWmPKbz
막대바에서 숫자(값) .sycro-progress-stepped-item 이 부분을 hover나 active 상태가 아닌
기본 상태에서도 표시되게 변경하고 싶은데 어렵습니다....
바 막대크기 변경되는 기능은 유지한채로 글자만 디폴트에서도 표시되게 하고 싶은데 어떻게 수정을 해야 할까요?
Copy
(function () {
var DIV = "div";
var BUTTON = "button";
var SPAN = "span";
var P = "p";
var A = "a";
var defaults = {
title: "Ticket Categories",
catagories: [
{
name: "Remote Support",
value: 66,
color: "#ff6384",
},
{
name: "Contract Work",
value: 14,
color: "#ff9f40",
},
{
name: "Network Project",
value: 8,
color: "#ffcd56",
},
{
name: "Regular Maintenance",
value: 6,
color: "#4bc0c0",
},
{
name: "string",
value: 6,
color: "#36a2eb",
},
],
};
window.addEventListener("load", function () {
initSteppedProgress();
});
function initSteppedProgress() {
[].forEach.call(
document.querySelectorAll("[data-stepped-bar]"),
function (steppedProgress, index) {
if (steppedProgress) {
var valueTotal = 0;
var data;
if (steppedProgress.getAttribute("data-stepped-bar")) {
data = JSON.parse(steppedProgress.getAttribute("data-stepped-bar"));
} else {
data = defaults;
}
//#region: Markup
var title = createElementWithClass(P, "syncro-card-title");
title.textContent = data.title;
var step = createElementWithClass(DIV, "syncro-progress-stepped");
var row = createElementWithClass(DIV, "syncro-row");
data.catagories.forEach(function (catagory, i) {
valueTotal += catagory.value;
});
data.catagories.forEach(function (catagory, i) {
stepItem = createElementWithClass(
DIV,
"syncro-progress-stepped-item"
);
stepItem.setAttribute(
"data-id",
"progress-stepped-item-" + index + "-" + i
);
stepItem.textContent = catagory.value;
stepItem.style.width = (catagory.value / valueTotal) * 100 + "%";
stepItem.style.backgroundColor = catagory.color;
step.appendChild(stepItem);
var dot = createElementWithClass(SPAN, "syncro-dot");
dot.style.backgroundColor = catagory.color;
var category = createElementWithClass(SPAN, "syncro-category-name");
category.textContent = catagory.name;
var btn = createElementWithClass(BUTTON, "syncro-btn");
btn.setAttribute(
"data-target",
"progress-stepped-item-" + index + "-" + i
);
btn.appendChild(dot);
btn.appendChild(category);
var col = createElementWithClass(DIV, "syncro-col-auto");
col.appendChild(btn);
row.appendChild(col);
});
var cardBody = createElementWithClass(DIV, "syncro-card-body");
cardBody.appendChild(title);
cardBody.appendChild(step);
cardBody.appendChild(row);
var card = createElementWithClass(DIV, "syncro-card");
card.appendChild(cardBody);
var markup = createElementWithClass(DIV);
markup.appendChild(card);
steppedProgress.innerHTML = markup.innerHTML;
//#endregion: Markup
//#region:
[].forEach.call(
steppedProgress.querySelectorAll(".syncro-progress-stepped-item"),
function (el) {
el.addEventListener("mouseenter", (e) => {
toggleActive(e, el);
});
el.addEventListener("mouseleave", (e) => {
toggleActive(e, el);
});
}
);
[].forEach.call(
steppedProgress.querySelectorAll(".syncro-btn"),
function (el) {
el.addEventListener("click", function () {
const dataID = el.getAttribute("data-target");
var targetElm = document.querySelector(
'[data-id="' + dataID + '"]'
);
if (targetElm.classList.contains("active")) {
targetElm.classList.remove("active");
} else {
[].forEach.call(
steppedProgress.querySelectorAll(
".syncro-progress-stepped-item"
),
function (el) {
el.classList.remove("active");
}
);
targetElm.classList.add("active");
}
});
}
);
//#endregion
}
}
);
}
function toggleActive(e, el) {
if (e.type === "mouseenter") {
if (!el.classList.contains("active")) {
el.classList.add("active");
}
} else if (e.type === "mouseleave") {
if (el.classList.contains("active")) {
el.classList.remove("active");
}
}
}
function createElementWithClass(element, className = "") {
var ele = document.createElement(element);
if (className) {
var classList = className.split(" ");
classList.forEach(function (value, index) {
ele.classList.add(value);
});
}
return ele;
}
})();답변 1개
채택된 답변
+20 포인트
3년 전
css 마지막 줄에
.syncro-progress-stepped-item{
font-size: 12px;
color: #fff;
border-radius: 5px !important;
-webkit-transform: scaleY(1.25);
transform: scaleY(1.25);
}
이거 넣으세요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인