Entonces, estoy tratando de implementar un conjunto de funciones en mi sitio web con múltiples objetos div, de modo que cuando hago clic en Div A , establece el color del texto de la página en rojo a través de Class A , y cuando hago clic en Div B , establece el texto en verde hasta Class B , y así sucesivamente.
Mi problema es que las otras clases no se desarman al hacer clic en varios objetos y una clase anula a las demás, por lo que el color del texto ya no cambiará.
He estado buscando soluciones y tratando de usar addClass() y removeClass() , pero no funciona por algún motivo. Aquí hay un fragmento de mi código aquí
$(function() { $('.one').click(function() { $("h1").addClass('onetxt'); $("h1").removeClass('twotxt, threetxt'); }); }); $(function() { $('.two').click(function() { $("h1").addClass('twotxt'); $("h1").removeClass('onetxt, threetxt'); }); }); $(function() { $('.three').click(function() { $("h1").addClass('threetxt'); $("h1").removeClass('onetxt, twotxt'); }); }); h1 { text-align: center; } div { height: 65px; width: 65px; margin: 20px auto; border-style: solid; } /*style info, ignore above here*/ .one { background-color: red; } .onetxt { color: red; } .two { background-color: green; } .twotxt { color: green; } .three { background-color: blue; } .threetxt { color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Sample Text</h1> <div class="one"></div> <div class="two"></div> <div class="three"></div>Cualquier ayuda en esto sería muy apreciada, y si necesita más información, pregúnteme en las respuestas, ¡gracias!
EDITAR: Aquí hay un enlace JSFiddle que demuestra el código que tengo actualmente, mi intención es que los tres elementos DIV cambien el color del texto superior cuando se seleccionan en cualquier orden, usando las clases si es posible.
Parece que el problema principal es que removeClass no admite selectores de clases múltiples (como 'onetxt, twotxt'). Además, no está eliminando todas las clases posibles según el orden de los clics.
Aquí hay una solución que podría funcionar. He escrito algunas funciones auxiliares que espero aclaren lo que está pasando.
const targets = 'h1, p' const classmap = { one: 'onetxt', two: 'twotxt', three: 'threetxt' } const allclasses = Object.values(classmap); function clearSelection() { allclasses.forEach(function(clz) { $(targets).removeClass(clz) }); } function addSelection(sel) { $(targets).addClass(classmap[sel]); } $(function() { $('.one').click(function(){ clearSelection(); addSelection('one') }); }); $(function() { $('.two').click(function(){ clearSelection(); addSelection('two') }); }); $(function() { $('.three').click(function(){ clearSelection(); addSelection('three') }); });No hay sobrecarga de .removeClass() compatible con múltiples argumentos, solo elimina la primera clase. .removeClass() sin argumento elimina todas las clases. Este quizás sea el que necesitas.
Modifico un poco tu código, incluyendo:
.color-palette es el contenedor de toda la selección de colores. .color es un cuadro de elección de color individual.data-color-name a .color . El atributo se usará para la asignación de clase css de texto de muestra.--color-1 , --color-2 ). La misma propiedad se utiliza para el fondo del cuadro de color y el color de fuente del texto de muestra. No tienes que mantener los colores en dos lugares diferentes. $('.color-palette').on('click', '.color', function(e) { $("#sample-text").removeClass().addClass($(e.currentTarget).data('color-name')); }); /* maintain the color choices here */ :root { --color-1: red; --color-2: green; --color-3: blue; } h1 { text-align: center; } .color { height: 65px; width: 65px; margin: 20px auto; border-style: solid; } /* style info, ignore above here */ /* color palette style */ .color.color-1 { background-color: var(--color-1); } .color.color-2 { background-color: var(--color-2); } .color.color-3 { background-color: var(--color-3); } /* sample text style */ #sample-text.color-1 { color: var(--color-1); } #sample-text.color-2 { color: var(--color-2); } #sample-text.color-3 { color: var(--color-3); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 id="sample-text">Sample Text</h1> <div class="color-palette"> <div class="color color-1" data-color-name="color-1"></div> <div class="color color-2" data-color-name="color-2"></div> <div class="color color-3" data-color-name="color-3"></div> </div>Aquí hay una solución API de DOM estándar basada en classList.toggle(className: string, force: boolean) . El segundo parámetro controla si toggle funciona como remove o add .
const classes = ['one', 'two', 'three']; classes.forEach(clazz => { document.querySelector(`.${clazz}`).addEventListener('click', () => { classes.forEach(cl => document.querySelector('h1').classList.toggle(`${cl}txt`, cl === clazz)); }) }) h1 { text-align: center; } div { height: 35px; width: 35px; margin: 5px auto; border-style: solid; } /*style info, ignore above here*/ .one { background-color: red; } .onetxt { color: red; } .two { background-color: green; } .twotxt { color: green; } .three { background-color: blue; } .threetxt { color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Sample Text</h1> <div class="one"></div> <div class="two"></div> <div class="three"></div>