堆棧內存溢出
  簡體   English   中英

如果兩個按鈕上有一個活動類，我如何添加一個特定於具有活動類的按鈕的功能？

[英]If there is an active class on two buttons, how do I add a function specific to the buttons with the active class?

 原文  2022-05-14 20:38:25  1   1    javascript

問題描述

這是我第一次發帖，而且我對 javascript 也很陌生。 我已經有這個問題好幾天了，並嘗試了各種解決方案，但都沒有奏效。

我有兩個按鈕——一個蝕刻，一個用於繪制——我希望蝕刻按鈕將鼠標懸停事件應用於 div 中的框。 我想繪制按鈕以在 div 的框中應用單擊事件。

我還有一個黑色按鈕、一個彩色按鈕和一個彩虹按鈕。

我的代碼在單擊按鈕時添加到活動類的位置。 兩組按鈕都在各自的容器中，因此我可以同時擁有兩個活動類。

我正在努力實現的是，當 etch 處於活動狀態且黑色處於活動狀態時，它會運行一個 mouseover 事件，將 div 框的背景更改為黑色。 或者，當 etch 處於活動狀態且顏色處於活動狀態時，背景顏色將更改為顏色選擇器中的任何值，等等。當 draw 處於活動狀態時，它有一個單擊事件，該事件包含黑色、顏色或任何處於活動狀態的內容類繪制按鈕。

我已經有了保存顏色以更改背景的功能，但我似乎無法實現其他所有功能。

我只能訪問 JavaScript，而不是 jQuery。 任何建議將不勝感激。

const grid = document.getElementById('grid');
const slider = document.getElementById('sizeSlider');
let gridValue = document.getElementById('slider-value');
let gridSize = document.querySelector('input');
const container = document.getElementById('container');
let colorPicker = document.getElementById('color-picker');

const toggleBtn = document.getElementById('toggle');
const applyGridSize = document.getElementById('apply');
const resetBtn = document.getElementById('reset');
const etchBtn = document.getElementById('etch');
const drawBtn = document.getElementById('draw');
const eraserBtn = document.getElementById('eraser');
const resetGridBtn = document.getElementById('reset-grid');
const blackBtn = document.getElementById('black-btn');
const colorBtn = document.getElementById('color-btn');
const rainbowBtn = document.getElementById('rainbow-btn');

const drawModeBtns = document.querySelectorAll('.draw-mode-btn');
const colorModeBtns = document.querySelectorAll('.color-mode-btn');




//function to get slider value
function showValue(x) {
    document.getElementById('slider-value').textContent = `Grid Size: ${x} x ${x}`;
}
gridSize.addEventListener('input', function (e) {
    squareSize = e.target.value;
    gridValue.textContent = `Grid Size: ${squareSize}x${squareSize}`;
});

// function to create grid
function createGrid(col, rows) {
    for (let i = 0; i < (col * rows); i++) {
        const div = document.createElement('div');
        grid.style.gridTemplateColumns = `repeat(${col}, 1fr)`;
        grid.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
        grid.appendChild(div).classList.add('box');
    }
}

// make 16x16 grid when window loads
window.onload = createGrid(slider.value, slider.value);




// modify grid size 
function modifyGridSize() {
    let boxes = grid.querySelectorAll(".box");
    boxes.forEach(box => box.remove());
    createGrid(slider.value, slider.value);
}

// change grid size with slider and apply button
applyGridSize.addEventListener('click', modifyGridSize);

// reset and clear grid to 16x16 when reset button is clicked
resetBtn.addEventListener('click', () => {
    let boxes = grid.querySelectorAll(".box");
    boxes.forEach(box => box.remove());
    createGrid(16, 16);
    slider.value = 16;
    gridValue.textContent = `Grid Size: 16 x 16`;
})

// clear grid only when button is clicked
resetGridBtn.addEventListener('click', () => {
    let boxes = grid.querySelectorAll('.box');
    boxes.forEach(box => box.style.backgroundColor = 'white');
})

// function to toggle lines on and off with button
toggleBtn.addEventListener('click', () => {
    let boxes = grid.querySelectorAll('.box');
    boxes.forEach(box => box.classList.toggle('toggle-lines'));
})




// add active class when a draw button is clicked
drawModeBtns.forEach(btn => {
    btn.addEventListener('click', (e) => {
        drawModeBtns.forEach(f => f.classList.remove('active'));
        e.target.classList.toggle('active');
    });
});
colorModeBtns.forEach(btn => {
    btn.addEventListener('click', (e) => {
        colorModeBtns.forEach(f => f.classList.remove('active'));
        e.target.classList.toggle('active');
    });
});




// background color change function for box divs in grid
function blackBackground() {
    this.style.backgroundColor = 'black';
}

// background color erase function
function eraseBackground() {
    this.style.backgroundColor = 'white';
}
eraserBtn.addEventListener('click', eraseBackground);

// random rainbow color background color function
function rainbowColor() {
    const randomR = Math.floor(Math.random() * 256);
    const randomG = Math.floor(Math.random() * 256);
    const randomB = Math.floor(Math.random() * 256);
    this.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
    // return `rgb(${randomR}, ${randomG}, ${randomB})`;
}

// random color background color function 
function colorBackground() {
    this.style.backgroundColor = changeColor();
}
// function to change background color to color picker input
function changeColor() {
    colorPicker.addEventListener('change', (e) => {
        let color = e.target.value;
        let boxes = grid.querySelectorAll('.box');
        boxes.forEach(box => {
            box.removeEventListener('mouseover', blackBackground);
            box.addEventListener('click', () => {
                box.style.backgroundColor = color;
            })
        })
    })
}

這是隨之而來的 HTML：

    <h1>Etch-a-Sketch</h1>

    <button id="reset">Reset All</button>
    <button id="reset-grid">Reset Grid</button>

    <br><br>

    <div id="container"></div>

    <div id="gridSize"></div>

    <div class="slider">
        <label for="range"></label>
        <span id="slider-value" style="color: black;">Grid Size: 16 x 16</span>
        <br>
        2 <input type="range" name="range" id="sizeSlider" step="1" value="16" min="2" max="100"
            onchange="showValue(this.value);"> 100
        <button id="apply">Apply</button>
    </div>
    <br>
    <form name="draw-mode" class="draw-mode">
        <input type="button" value="Etch-a-Sketch Mode" id="etch" class="draw-mode-btn">
        <input type="button" value="Pixel Drawing Mode" id="draw" class="draw-mode-btn">
    </form>
    <br>
    <form name="color-mode" class="color-mode">
        <input type="button" value="Black" id="black-btn" class="color-mode-btn">
        <input type="button" value="Color" id="color-btn" class="color-mode-btn">
        <input type="button" value="Rainbow" id="rainbow-btn" class="color-mode-btn">
    </form>
    <br>
    <div>
        <input type="color" id="color-picker" name="color" value="" data-name="color-picker">
    </div>
    <br>
    <div>
        <button id="eraser" class="btn">Eraser</button>
    </div>
    <br>
    <div class="toggle-lines">
        <button id="toggle">Toggle Lines On/Off</button>
    </div>
    <br>

    <div id="grid" class="toggle-lines"></div>

    <br><br>


    <script src="./javascript.js"></script>

我的頁面截圖：頁面截圖

1 個解決方案

解決方案1
 0  2022-05-16 21:25:08

創建一個包含有趣值的狀態對象 - 並返回您想要的內容：

  • drawState是狀態對象
  • 它擁有_mode ：“單擊”或“鼠標懸停”（單擊或蝕刻）
  • 它擁有_colorMode
  • 基於_colorMode它有一個規則集總是返回你想要的顏色（ get color()返回顏色選擇器中的顏色、隨機顏色、白色（用於橡皮擦）或黑色

這樣你就可以擺脫很多不必要的功能。

（也使用了 HTML 元素上的data-drawval自定義屬性！） 

 const grid = document.getElementById('grid'); const slider = document.getElementById('sizeSlider'); let gridValue = document.getElementById('slider-value'); let gridSize = document.querySelector('input'); const container = document.getElementById('container'); let colorPicker = document.getElementById('color-picker'); const toggleBtn = document.getElementById('toggle'); const applyGridSize = document.getElementById('apply'); const resetBtn = document.getElementById('reset'); const etchBtn = document.getElementById('etch'); const drawBtn = document.getElementById('draw'); const eraserBtn = document.getElementById('eraser'); const resetGridBtn = document.getElementById('reset-grid'); const blackBtn = document.getElementById('black-btn'); const colorBtn = document.getElementById('color-btn'); const rainbowBtn = document.getElementById('rainbow-btn'); const drawModeBtns = document.querySelectorAll('.draw-mode-btn'); const colorModeBtns = document.querySelectorAll('.color-mode-btn'); const BOX_DIMENSION = 10 const initDrawState = () => { let _mode = "mouseover" let _colorMode = "black" return { get mode() { return _mode }, set mode(value) { _mode = value }, get color() { if (this.colorMode === "rainbow") { return rainbowColor() } else if (this.colorMode === "color") { return colorPicker.value } else if (this.colorMode === "eraser") { return "white" } else { return "black" } }, get colorMode() { return _colorMode }, set colorMode(value) { _colorMode = value } } } const drawState = initDrawState() //function to get slider value function showValue(x) { document.getElementById('slider-value').textContent = `Grid Size: ${x} x ${x}`; } gridSize.addEventListener('input', function(e) { squareSize = e.target.value; gridValue.textContent = `Grid Size: ${squareSize}x${squareSize}`; }); // function to create grid function createGrid(col, rows) { grid.style.height = rows * BOX_DIMENSION + "px" grid.style.width = col * BOX_DIMENSION + "px" for (let i = 0; i < (col * rows); i++) { const div = document.createElement('div'); grid.style.gridTemplateColumns = `repeat(${col}, 1fr)`; grid.style.gridTemplateRows = `repeat(${rows}, 1fr)`; grid.appendChild(div).classList.add('box'); } } const boxEventListener = (e) => { e.target.style.backgroundColor = drawState.color } const setBoxesEventListener = (boxes) => { boxes.forEach(box => { box.addEventListener(drawState.mode, boxEventListener) }) } const removeBoxesEventListener = (boxes) => { boxes.forEach(box => { box.removeEventListener("mouseover", boxEventListener) box.removeEventListener("click", boxEventListener) }) } const changeBoxesEventListener = () =>  { const boxes = grid.querySelectorAll(".box") removeBoxesEventListener(boxes) setBoxesEventListener(boxes) } // make 16x16 grid when window loads window.onload = modifyGridSize() // modify grid size function modifyGridSize() { grid.innerHTML = "" createGrid(slider.value, slider.value); changeBoxesEventListener() } // change grid size with slider and apply button applyGridSize.addEventListener('click', modifyGridSize); // reset and clear grid to 16x16 when reset button is clicked resetBtn.addEventListener('click', () => { let boxes = grid.querySelectorAll(".box"); boxes.forEach(box => box.remove()); createGrid(16, 16); slider.value = 16; gridValue.textContent = `Grid Size: 16 x 16`; changeBoxesEventListener() }) // clear grid only when button is clicked resetGridBtn.addEventListener('click', () => { let boxes = grid.querySelectorAll('.box'); boxes.forEach(box => box.style.backgroundColor = 'white'); }) // function to toggle lines on and off with button toggleBtn.addEventListener('click', () => { let boxes = grid.querySelectorAll('.box'); boxes.forEach(box => box.classList.toggle('toggle-lines')); }) // add active class when a draw button is clicked drawModeBtns.forEach(btn => { btn.addEventListener('click', (e) => { drawModeBtns.forEach(f => f.classList.remove('active')); e.target.classList.toggle('active'); drawState.mode = e.target.getAttribute("data-drawval") changeBoxesEventListener() }); }); colorModeBtns.forEach(btn => { btn.addEventListener('click', (e) => { colorModeBtns.forEach(f => f.classList.remove('active')); e.target.classList.toggle('active'); drawState.colorMode = e.target.getAttribute("data-drawval") }); }); // random rainbow color background color function function rainbowColor() { const randomR = Math.floor(Math.random() * 256); const randomG = Math.floor(Math.random() * 256); const randomB = Math.floor(Math.random() * 256); // this.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`; return `rgb(${randomR}, ${randomG}, ${randomB})` }
 .draw-mode-btn.active { background: purple; color: white; } .color-mode-btn.active { background: purple; color: white; } .box { border: 1px solid black; background: white; box-sizing: border-box; } #grid>.box.toggle-lines { border: 1px solid white; } #grid { display: grid; }
 <h1>Etch-a-Sketch</h1> <button id="reset">Reset All</button> <button id="reset-grid">Reset Grid</button> <br><br> <div id="container"></div> <div id="gridSize"></div> <div class="slider"> <label for="range"></label> <span id="slider-value" style="color: black;">Grid Size: 16 x 16</span> <br> 2 <input type="range" name="range" id="sizeSlider" step="1" value="16" min="2" max="100" onchange="showValue(this.value);"> 100 <button id="apply">Apply</button> </div> <br> <form name="draw-mode" class="draw-mode"> <input type="button" value="Etch-a-Sketch Mode" id="etch" class="draw-mode-btn active" data-drawval="mouseover"> <input type="button" value="Pixel Drawing Mode" id="draw" class="draw-mode-btn" data-drawval="click"> </form> <br> <form name="color-mode" class="color-mode"> <input type="button" value="Black" id="black-btn" class="color-mode-btn active" data-drawval="black"> <input type="button" value="Color" id="color-btn" class="color-mode-btn" data-drawval="color"> <input type="button" value="Rainbow" id="rainbow-btn" class="color-mode-btn" data-drawval="rainbow"> </form> <br> <div> <input type="color" id="color-picker" name="color" value="" data-name="color-picker"> </div> <br> <div> <button id="eraser" class="btn color-mode-btn" data-drawval="eraser">Eraser</button> </div> <br> <div class="toggle-lines"> <button id="toggle">Toggle Lines On/Off</button> </div> <br> <div id="grid" class="toggle-lines"></div> <br><br>

代碼可以進一步簡化，但其他一些基本思想應該已經更新——從描述中不清楚這些是否可以改變。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如果選擇了任何選項按鈕，如何添加活動的 class？ 有沒有辦法為一組按鈕添加一個活動的 class onClick？ 如何在ng-click按鈕上添加活動類？ React：如何在按鈕組中切換活動類？ 在ReactJs中切換按鈕上的活動類 jQuery- 循環按鈕在單擊時添加活動類 向動態生成的按鈕添加和刪除活動類事件偵聽器 引導和反應，在單選按鈕上分配 .active 類 單擊時將活動類切換到按鈕 ReactJs 將“活動”class 添加到按鈕列表中的按鈕
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM