Tengo un campo de selección con diferentes valores:
Al seleccionar un valor, quiero agregar una clase css a un div específico, siendo el nombre de la clase css el valor seleccionado. Suficientemente fácil :
$(document).on("change", "[data-name='continent'] select", function () { var continent = $('[data-name="continent"] select').val(); $("#mydiv").addClass(continent); });Esto funciona bien, pero hay un problema: si cambio el valor del campo de selección, las clases anteriores no se eliminarán. no puedo hacer:
$("#mydiv").removeClass().addClass(continent);Porque #mydiv ya tiene otras clases importantes. Yo podría hacer :
$("#mydiv").removeClass('africa').removeClass('europe').removeClass('america').removeClass('asia').removeClass('oceania').addClass(continent);Pero en realidad tengo más de 5 opciones y pueden cambiar en el futuro; Prefiero mantener las cosas flexibles. Y más que nada, quiero aprender javascript. ¿Hay alguna forma de eliminar todas las clases que son valores del campo de selección?
Para obtener una lista de las clases que desea eliminar, puede usar algo como esto:
[...testEl.querySelectorAll('option')].map(x => x.value).join(' ');Esto es JavaScript estándar... si se hace en jQuery, se vería así:
$('#my-select > option').map((i,el)=> el.value).toArray().join(' '); Eso sacará una lista de las opciones y le dará una cadena delimitada por espacios. Luego podría usar esta lista para hacer su .removeClass() .
Sin embargo, me pregunto si la clase es la mejor opción para esto. En el siguiente fragmento, hay un ejemplo del uso de un atributo de datos en lugar de una clase, y cómo ese atributo de datos podría usarse en un selector de CSS (esto también funcionaría en jQuery o querySelector ). Tal vez una opción a considerar...
const testEl = document.querySelector('#test'); const allOptions = $('#test > option').map((i,el)=> el.value).toArray().join(' '); console.log(allOptions); const testChange = e => { const el = e.target; el.dataset.chosen = el.value; }; testEl.addEventListener('change', testChange); testChange({ target: testEl }); #test[data-chosen="africa"] { color: red; } #test[data-chosen="america"] { color: blue; } #test { color: orange; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name='test' id='test' value='europe'> <option value='africa'>africa</option> <option value='europe'>europe</option> <option value='america'>america</option> <option value='asia'>asia</option> <option value='oceania'>oceania</option> </select>Prueba esto:
$('#continent').on('change', (e) => { let $myDiv = $('#myDiv'), $continent = $(e.target), possibleValues = $continent.find('option').toArray().map(item => item.value).join(' '); $myDiv.removeClass(possibleValues).addClass($continent.val()); });Explicación:
Reúna todos los valores posibles de la selección:
$continent.find('option').toArray().map(item => item.value)Únalos en una lista separada por espacios en una cadena:
.join(' ');Eliminar todas las clases de esa lista del elemento de destino
$myDiv.removeClass(possibleValues)Agregue la clase seleccionada después de ella.
Manifestación:
$('#continent').on('change', (e) => { let $myDiv = $('#myDiv'), $continent = $(e.target), possibleValues = $continent.find('option').toArray().map(item => item.value).join(' '); $myDiv.removeClass(possibleValues).addClass($continent.val()); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="continent"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> <option value="e">E</option> </select> <div id="myDiv" class="other-class keep-me">my div</div>Deberá crear una cadena que contenga todas las clases que desea agregar/eliminar separadas por espacios:
$("#mydiv").removeClass("africa europe america asia oceania");