Visibilidad de div con javascript - problema

Estoy tratando de usar div para mostrar contenido en mi página. Esto se controla con un elemento de cambio en un menú de selección. Funciona perfectamente, pero el problema es que quiero que un div se cierre cuando se abre otro. El div está bien abierto pero no cierra los demás. A continuación se muestra un código de ejemplo. ¿Qué estoy haciendo mal?

JavaScript:

if(document.getElementById('catgry').value == '01'){
    document.getElementById('post04').style.visibility = "visible";
    document.getElementById('post04').style.display = "";

    document.getElementById('post07').style.visibility = "hidden";
    document.getElementById('post07').style.display = "none";
}else if(document.getElementById('catgry').value == '02'){
    document.getElementById('post02').style.visibility = "visible";
    document.getElementById('post02').style.display = "";

    document.getElementById('post04').style.visibility = "hidden";
    document.getElementById('post04').style.display = "none";

    document.getElementById('post07').style.visibility = "hidden";
    document.getElementById('post07').style.display = "none";
}

HTML:

<div id="post04" style="visibility:hidden; display:none;">
  <table  class="posttb"><tr>
    <td width="30%">Author</td>
    <td><input type="text" name="author" size="30" class="postfd"></td>
  </tr>
 </table>

 </div>

preguntado el 09 de enero de 11 a las 01:01

Puede simplificar el problema colocando las reglas de visualización en CSS y simplemente agregando y eliminando clases a sus divs. -

@sammville Demostración en vivo: jsfiddle.net/9Tx7g -

No tu no Necesito usar jQuery. Pero su enfoque actual es bastante ineficiente. Sería más fácil conocer el mejor enfoque si tuviéramos una imagen más completa de su HTML. Son los post0x elementos hermanos? Si es así, ¿su contenedor principal tiene una identificación? -

+1 a "patrick dw" ... ¿por qué todo debe hacerse siempre con jQuery? jQuery es no es dios en el mundo javascript ... -

@WarrenFaith Veo que estás tratando de cuestionar el papel de jQuery como dios en el mundo de JavaScript. Deberías dejar eso por completo y usar jQuery. -

4 Respuestas

Es difícil de decir sin ver su marcado, pero podría ser tan simple como esto:

Ejemplo: http://jsfiddle.net/jtfke/

var posts = document.getElementById('posts').children;

document.getElementById('catgry').onchange = function() {
    for( var i = 0, len = posts.length; i < len; i++ ) {
        posts[ i ].style.display = (i == this.selectedIndex) ? 'block' : '';
    }
};

ejemplo html

<select id='catgry'>
    <option value='post01'>post 1</option>
    <option value='post02'>post 2</option>
    <option value='post03'>post 3</option>
    <option value='post04'>post 4</option>
</select>
<div id='posts'>
    <div>post 1 content</div>
    <div>post 2 content</div>
    <div>post 3 content</div>
    <div>post 4 content</div>
</div>

Respondido el 09 de enero de 11 a las 04:01

Pure JS es definitivamente mejor para solucionar problemas de código. jQuery solo agrava el problema al agregar más de 50 KB de código innecesario. - usuario1385191

Considere usar jQuery y el acordeón jQuery http://jqueryui.com/demos/accordion/

Respondido el 09 de enero de 11 a las 04:01

@sammville Bueno, ¿qué biblioteca de JavaScript estás usando entonces? - Šime Vidas

No estoy usando ninguna biblioteca para ello. El código javascript que escribí está arriba - Sammville

@sammville, ¿hay alguna razón por la que no desee utilizar una biblioteca de JavaScript? - Vadim

¡¡No!! Solo pensé que codificar sería más fácil. ¿Alguna recomendación de bibliotecas para usar? - Sammville

¿Por qué todo debe hacerse siempre con jQuery? jQuery no es dios en el mundo javascript ... - WarrenFaith

Puede hacerlo con Javascript puro y algunos bucles.

<form method="post" action="#">
    <select id="selectMenu">
        <option id="option1" value="option 1">option 1</option>
        <option id="option2" value="option 2">option 2</option>
        <option id="option3" value="option 3">option 3</option>
    </select>
</form>

<div id="div1" class="postDiv">Div 1</div>
<div id="div2" class="postDiv">Div 2</div>
<div id="div3" class="postDiv">Div 3</div>

<script type="text/javascript">
init();


function init()
{
    addListeners();  
}

function addListeners()
{
    document.getElementById("selectMenu").onchange = selectChange;
}

function selectChange(evt)
{
    for(var i=0;i<evt.currentTarget.length;i++)
    {
        if(i == evt.currentTarget.selectedIndex)
        {
          adjustDivs(i+1, evt.currentTarget.options);
        }  
    }
}

function adjustDivs(optionId, options)
{
    document.getElementById("div" + optionId).style.display = "block";
    for(var i=0;i<options.length;i++)
    {
        if(i != (optionId-1))
        {
            document.getElementById("div" + (i+1)).style.display = "none";
        }
    }
}
</script>

http://jsfiddle.net/hGxfS/

Respondido el 09 de enero de 11 a las 09:01

Instale jquery;

Utilice este código como marcado html para el cuadro de selección. recuerde especificar id = visibiitySelector y proporcionar un atributo "_showelement" para cada valor de opción, que coincida con el id del div que desea mostrar si se selecciona la opción

<select id="visibilitySelector">
    <option value="whatever" _showelement="post01">whatever</option>
    <option value="whatever" _showelement="post02">whatever</option>
</select>

Copie esta función en los javascripts de la página

$(document).ready(function(){
    $('#visibilitySelector').change(function(){
        var showelement = $('#visibilitySelector option:selected').attr('_showelement');
        $('div.showhide').not('#' + showelement ).hide();
        $('#' + showelement ).show();
    });
});

Codifique los divs como se muestra a continuación, recordando proporcionar la clase "showhide"

<div id="post01" class="showhide">
</div>
<div id="post01" class="showhide">
</div>
<div id="post01" class="showhide">
</div>

Respondido el 09 de enero de 11 a las 04:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.