Quiero colorear diferentes elementos en función de sus propias identificaciones. Si su id está en una lista de id dada por mí, hazlo de un color, si no, hazlo de otro color.
En el siguiente ejemplo hay 4 div, cada uno de un color diferente. ¿Cómo puedo colorear cada div según su identificación sin definir reglas css para cada uno de ellos?
const Main = () => { return ( <React.Fragment> <div id='1' style={{background: 'red'}}>1</div> <div id='2' style={{background: 'blue'}}>2</div> <div id='3' style={{background: 'green'}}>3</div> <div id='4' style={{background: 'cyan'}}>4</div> </React.Fragment> ) }https://jsfiddle.net/9debt3cL/19/
Si la pregunta no es muy clara, hágamelo saber.
ACTUALIZACIÓN: Contexto: tengo un plano svg dividido en varias partes, cada una con un número único. Tengo que buscar algunos datos que contengan algunas partes de los números de los planos y dependiendo de esos números para llenar las rutas de los planos.
No estoy completamente seguro de si funcionaría, pero siempre puede intentarlo, busque un caso de cambio usando javascript. Establezca la expresión y tenga diferentes casos según el valor, etc. Puede ser Id en este ejemplo y tener un resultado diferente según el caso.
Creo que Wanz tiene el enfoque correcto, puede crear clases css con los atributos deseados. Luego agregue esta clase al elemento dom si corresponde al caso del interruptor. Al igual que:
var element = document.getElementById("myDIV"); switch (expr) { case 'id1': element.classList.add("styleId1"); break; case 'id2': element.classList.add("styleId2"); case 'id3': element.classList.add("styleId3"); break; default: console.log(`no matching id`); }Podrías algo como esto:
const Main = () => { const coloredIds = ['1', '4']; const getBackgroundColor = (id) => { return coloredIds.includes(id) ? 'cyan' : 'red'; } return ( <React.Fragment> <div id='1' style={{background: getBackgroundColor('1')}}>1</div> <div id='2' style={{background: getBackgroundColor('2')}}>2</div> <div id='3' style={{background: getBackgroundColor('3')}}>3</div> <div id='4' style={{background: getBackgroundColor('4')}}>4</div> </React.Fragment> ); }O si tienes varios colores
const getBackgroundColor = (id) => { switch (id) { case '1': return 'red'; case '2': return 'blue; case '3': return 'green'; case '4': default: return 'cyan'; } }