|
|
| 第1行： |
第1行： |
| $(function () {
| |
| const container = document.getElementById("chart-constant-js-cut-in-1");
| |
|
| |
|
| const htmlContent = `
| |
| <div class="button-container">
| |
| <button class="button" data-target="chart-constant-table-12 chart-constant-table-11" data-color="#FF9500">
| |
| <span class="label">12和11</span>
| |
| </button>
| |
| <button class="button" data-target="chart-constant-table-10" data-color="#c31c40">
| |
| <span class="label">10</span>
| |
| </button>
| |
| <button class="button" data-target="chart-constant-table-9" data-color="#65226f">
| |
| <span class="label">9</span>
| |
| </button>
| |
| <button class="button" data-target="chart-constant-table-8" data-color="#2bb36b">
| |
| <span class="label">8</span>
| |
| </button>
| |
| <button class="button reset" data-target="all">
| |
| <span class="label">重置</span>
| |
| </button>
| |
| </div>
| |
| `;
| |
|
| |
| const cssContent = `
| |
| .button-container {
| |
| display: flex;
| |
| gap: 0.8em;
| |
| margin-bottom: 0.8em;
| |
| }
| |
|
| |
| .button {
| |
| font-size: 15px;
| |
| padding: 0.6em 1.3em;
| |
| font-weight: 500;
| |
| color: #000;
| |
| border: none;
| |
| position: relative;
| |
| overflow: hidden;
| |
| border-radius: 0.5em;
| |
| background: transparent;
| |
| transition: background 0.3s, color 0.3s;
| |
| cursor: pointer;
| |
| box-shadow: 0 0 10px #7f7f7f;
| |
| }
| |
|
| |
| .button .label {
| |
| position: relative;
| |
| }
| |
|
| |
| .button.active {
| |
| color: #fff;
| |
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
| |
| }
| |
|
| |
| .reset {
| |
| color: #000;
| |
| }
| |
|
| |
| .hidden {
| |
| display: none !important;
| |
| }
| |
| `;
| |
|
| |
| const jsContent = `
| |
| const buttons = document.querySelectorAll(".button");
| |
| const tables = document.querySelectorAll("[class^='chart-constant-table']");
| |
|
| |
| buttons.forEach((button) => {
| |
| button.addEventListener("click", () => {
| |
| if (button.classList.contains("reset")) {
| |
| tables.forEach((table) => table.classList.remove("hidden"));
| |
| buttons.forEach((btn) => {
| |
| btn.classList.remove("active");
| |
| btn.style.background = "transparent";
| |
| });
| |
| return;
| |
| }
| |
|
| |
| buttons.forEach((btn) => {
| |
| btn.classList.remove("active");
| |
| btn.style.background = "transparent";
| |
| });
| |
|
| |
| button.classList.add("active");
| |
| const color = button.getAttribute("data-color");
| |
| if (color) {
| |
| button.style.background = color;
| |
| }
| |
|
| |
| const targets = button.getAttribute("data-target").split(" ");
| |
| tables.forEach((table) => table.classList.add("hidden"));
| |
|
| |
| targets.forEach((target) => {
| |
| const matchedTables = document.querySelectorAll("div." + target);
| |
| matchedTables.forEach((table) => table.classList.remove("hidden"));
| |
| });
| |
| });
| |
| });
| |
| `;
| |
|
| |
| container.innerHTML = htmlContent;
| |
|
| |
| const styleElement = document.createElement("style");
| |
| styleElement.innerHTML = cssContent;
| |
| document.head.appendChild(styleElement);
| |
|
| |
| const scriptElement = document.createElement("script");
| |
| scriptElement.innerHTML = jsContent;
| |
| document.body.appendChild(scriptElement);
| |
|
| |
| });
| |
