Foros del Web » Programando para Internet » Javascript »

if else con operador "?"

Estas en el tema de if else con operador "?" en el foro de Javascript en Foros del Web. Hola. Tengo una función con una variable que incluye una forma abreviada de operador if else. Concretamente: Código: var style = this.value == 0 ? ...
  #1 (permalink)  
Antiguo 04/12/2016, 17:21
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 18 años, 8 meses
Puntos: 8
if else con operador "?"

Hola.

Tengo una función con una variable que incluye una forma abreviada de operador if else.

Concretamente:


Código:
var style = this.value == 0 ? 'none' : 'block';
Según tengo entendido, se trata de que si el valor (en un selector de opciones) es "0", el estilo es "None" y en otro caso "block".

Después yo aplico esta variable para adjudicarle el estilo a un selector de clase:

Código:
.......style.display = style;
El problema es que la variable de arriba no me sirve tal cual sino que se trata de eliminar el else, quedando como una condicional simple.

Si el valor es cero, el estilo es "none".

No obstante, no soy capaz de traducirlo así.

Os dejo la función completa para ver si me dais alguna pista:

Código:
function () {
var style = this.value == 0 ? 'none' : 'block';
var targetElements = document.getElementsByClassName("clasificador"); 
var i = 0, len = targetElements.length; 
for(i = 0; i < len; i ++) { 
targetElements[i].style.display = style; 
}
Un saludo y gracias.
  #2 (permalink)  
Antiguo 05/12/2016, 07:35
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 8 años, 8 meses
Puntos: 86
Respuesta: if else con operador "?"

¿y si el valor no es 0? Quiero decir, si se selecciona la opción con value 0, se ocultan los elementos, pero si después se selecciona otra opción con un valor distinto a 0, los elementos seguirán ocultos. ¿Es eso lo que quieres?
  #3 (permalink)  
Antiguo 05/12/2016, 07:45
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 18 años, 8 meses
Puntos: 8
Respuesta: if else con operador "?"

Hola mpozo.

No, no importa "0" o cualquier otro valor. Todos son indicativos de una opción.

<option value="0">Opción 1</option>
<option value="1">Opción 2</option>
<option value ="2">Opción 3</option>

etc.

De lo que se trata es de que tengo unas opciones en un selector, unas tienen que dar lugar a que se muestre un bloque del formulario y otras no.

El bloque está inicialmente oculto con css.

Ese código funciona parcialmente, porque si lo repites para cada una de las opciones (valores 0, 1, 2, 3, 4, 5, etc.) lo que hace es que oculta o deja visible de forma alterna, puesto que si está visible lo deja invisible y viceversa. Ello no sirve en mi caso.

Imaginemos estas opciones y como tienen que estar según sus valores:

0 = Oculto
1 = Oculto
2 = Oculto
3 = Oculto
4 = Oculto
5 = Oculto
6 = Visible
7 = Visible
8 = Visible

Si seleccionas la opción con el valor "0", el módulo está oculto. Si luego el usuario cambia de opinión y selecciona la opción "7", el módulo aparece visible.

Pero si luego el usuario vuelve a cambiar de opinión y selecciona la opción con el valor "8", el alternador hace que lo que estaba visible se oculte, cuando tendría que permanecer visible.

Lo mismo si estando oculto se selecciona el "1" y luego se cambia a "2".

Es el efecto de 'none' : 'block';

De lo que se trata es de que la variable inserte siempre un estilo, el que sea, "block" o "none", pero no else.
  #4 (permalink)  
Antiguo 05/12/2016, 08:48
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: if else con operador "?"

Puede ser?

Código Javascript:
Ver original
  1. var v = selector.value; //toma variable
  2.  
  3. if(v == "a" || v == "b" || v== "c" || ...){
  4. elemento.style.display = "block";
  5. }
  6. else{
  7. elemento.style.display = "none";
  8. }

con a,b,c,... se mantiene visible, de otro modo se esconde...

otro modo que el valor de select es "oculto" o "visible"

Código Javascript:
Ver original
  1. var v = selector.value; //toma variable
  2.  
  3. if(v == "visible"){
  4. elemento.style.display = "block";
  5. }
  6. else{
  7. elemento.style.display = "none";
  8. }
  #5 (permalink)  
Antiguo 05/12/2016, 09:11
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 18 años, 8 meses
Puntos: 8
Respuesta: if else con operador "?"

Lo acabo de poner como dices (si es que lo he insertado bien) y no funciona.

Voy a poner todo el desarrollo aquí:

Código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo</title>
</head>
<body>
<select id="test">
   <option value="0">éste sí</option>
   <option value="1">éste sí</option>  
   <option value="2">éste no</option>
</select>

<style>
.eldivaocultar {
display: none
}
</style>

<div class="eldivaocultar">Se muestra el contenido</div>


</body>
<script>
document.getElementById('test').addEventListener('change', function () {
var v = selector.value; //toma variable
if (v == "éste sí"){
var targetElements = document.getElementsByClassName("eldivaocultar"); 
var i = 0, len = targetElements.length; 
for(i = 0; i < len; i ++) { 
targetElements[i].style.display = "block"; 
} 
else {
var targetElements = document.getElementsByClassName("eldivaocultar"); 
var i = 0, len = targetElements.length; 
for(i = 0; i < len; i ++) { 
targetElements[i].style.display = "none"; 
}
}
});
</script>
</html>
Como véis, el div a ocultar ya está previamente oculto y se trata de que al seleccionar cualquiera de las opciones con valor "éste sí" se muestre, ocultándose si se selecciona otro con el valor "éste no".

Última edición por JUMASOL; 05/12/2016 a las 09:53
  #6 (permalink)  
Antiguo 05/12/2016, 09:58
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: if else con operador "?"

Yo probé en bruto lo siguiente, tu amoldalo a lo que necesitas:

Código HTML:
Ver original
  1. <script type="text/javascript">
  2. function hide(){
  3. var s = document.getElementById("selector");
  4. var d = document.getElementById("div");
  5.     if(s.value == "oculto"){
  6.     d.style.display = "none";
  7.     }
  8.     else{
  9.     d.style.display = "block";
  10.     }
  11. }
  12.  
  13.  
  14. <select id="selector" onchange="hide();">
  15.     <option value="oculto">0</option>
  16.     <option value="oculto">1</option>
  17.     <option value="oculto">2</option>
  18.     <option value="oculto">3</option>
  19.     <option value="oculto">4</option>
  20.     <option value="oculto">5</option>
  21.     <option value="visible">6</option>
  22.     <option value="visible">7</option>
  23.     <option value="visible">8</option>
  24. <br/>
  25. <div id="div">hola!!</div>

  #7 (permalink)  
Antiguo 05/12/2016, 12:03
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 18 años, 8 meses
Puntos: 8
Respuesta: if else con operador "?"

Gracias Álvaro (y compañía).

Finalmente lo he conseguido con estas modificaciones a lo último que me has indicado:

1. El onclick se añade de forma dinámica.

2. El div a ocultar o mostrar es una clase. Y está oculto inicialmente con css.

3. Son varios los valores que lo muestran.

Lo he puesto así:

Código:
<html>

<style>
.divo {
display: none
}
</style>

<select id="selector">
    <option value="0">Oculto</option>
    <option value="1">Oculto</option>
    <option value="2">Oculto</option>
    <option value="3">Oculto</option>
    <option value="4">Oculto</option>
    <option value="5">Oculto</option>
    <option value="6">Visible</option>
    <option value="7">Visible</option>
    <option value="8">Visible</option>
</select>

<div class="divo">Elemento Visible</div>

<script>
document.getElementById('selector').addEventListener('change', function () {
var s = document.getElementById("selector");
if(s.value == "6" || s.value == "7" || s.value == "8"){
var elements = document.getElementsByClassName('divo');
for(var i=0; i<elements.length; i++) { 
elements[i].style.display='block';
}
}
else {
var elements = document.getElementsByClassName('divo');
for(var i=0; i<elements.length; i++) { 
elements[i].style.display='none';
}
}
});
</script>
	
</html>
Por si le sirve a alguno.

He visto otras soluciones con jQuery por ahí, pero a mi me gusta más cuanto más simple mejor.

Un saludo y gracias.
  #8 (permalink)  
Antiguo 05/12/2016, 12:23
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: if else con operador "?"

Una recomendacion pequeña, limpiar un poco la función

Código Javascript:
Ver original
  1. function(){
  2. var s = document.getElementById("selector");
  3. var elements = document.getElementsByClassName("divo");
  4. var d = "none";
  5.  
  6.     if(s.value == "6" || s.value == "7" || s.value == "8"){ d = "block"; }
  7.    
  8.     for(var k=0;k<elements.length;k++){
  9.     els[k].style.display = d;
  10.     }
  11. }

Última edición por alvaro_trewhela; 05/12/2016 a las 13:13
  #9 (permalink)  
Antiguo 05/12/2016, 14:45
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 8 años, 8 meses
Puntos: 86
Respuesta: if else con operador "?"

También se puede hacer con map-inline, pero lo importante es la condicional de control de la línea #10. De tal modo que se evita reescribir la propiedad
Código Javascript:
Ver original
  1. document.getElementById('selector').addEventListener('change', function () {
  2.  
  3. var a = {
  4.     6: 'block',
  5.     7: 'block',
  6.     8: 'block'
  7. } [this.value] || '',
  8. elements = document.getElementsByClassName('divo');
  9.  
  10. if (a == elements[0].style.display) return;
  11.  
  12. for(var i=0; i<elements.length; i++) {
  13.  
  14. elements[i].style.display= a;
  15.  
  16. }
  17. });

Etiquetas: operador, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:13.