堆栈内存溢出
  繁体   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  6   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