if else con operador "?"

JUMASOL · #1 (**permalink**) 04/12/2016, 17:21

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.

mpozo · #2 (**permalink**) 05/12/2016, 07:35

¿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?

JUMASOL · #3 (**permalink**) 05/12/2016, 07:45

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**) 05/12/2016, 08:48

Puede ser?

Código Javascript:

Ver originalvar v = selector.value; //toma variable
 
if(v == "a" || v == "b" || v== "c" || ...){
elemento.style.display = "block";
}
else{
elemento.style.display = "none";
}

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 originalvar v = selector.value; //toma variable
 
if(v == "visible"){
elemento.style.display = "block";
}
else{
elemento.style.display = "none";
}

JUMASOL · #5 (**permalink**) 05/12/2016, 09:11

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".

#6 (**permalink**) 05/12/2016, 09:58

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

Código HTML:

Ver original<script type="text/javascript">
function hide(){
var s = document.getElementById("selector");
var d = document.getElementById("div");
    if(s.value == "oculto"){
    d.style.display = "none";
    }
    else{
    d.style.display = "block";
    }
}
 
</script>
 
<select id="selector" onchange="hide();">
    <option value="oculto">0</option>
    <option value="oculto">1</option>
    <option value="oculto">2</option>
    <option value="oculto">3</option>
    <option value="oculto">4</option>
    <option value="oculto">5</option>
    <option value="visible">6</option>
    <option value="visible">7</option>
    <option value="visible">8</option>
</select>
<br/>
<div id="div">hola!!</div>

JUMASOL · #7 (**permalink**) 05/12/2016, 12:03

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**) 05/12/2016, 12:23

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

Código Javascript:

Ver originalfunction(){
var s = document.getElementById("selector");
var elements = document.getElementsByClassName("divo");
var d = "none";
 
    if(s.value == "6" || s.value == "7" || s.value == "8"){ d = "block"; }
    
    for(var k=0;k<elements.length;k++){
    els[k].style.display = d;
    }
}

mpozo · #9 (**permalink**) 05/12/2016, 14:45

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 originaldocument.getElementById('selector').addEventListener('change', function () {
 
var a = {
    6: 'block',
    7: 'block',
    8: 'block'
} [this.value] || '',
elements = document.getElementsByClassName('divo');
 
if (a == elements[0].style.display) return;
 
for(var i=0; i<elements.length; i++) { 
 
elements[i].style.display= a;
 
}
});