1

Necesito mostrar y ocultar primero 3 indicadores, y despues mostrar y ocultar los otros 3, tengo el código de esta manera, me muestra y oculta los primeros 3, los otros 3 no, pensé que de esta manera funcionaria:

   
                    <div id="contenido">
                    <div id="content-text1"></div>
                    <div id="content-text2"></div>
                    <div id="content-text3"></div>
                    
                    <div id="contenido2" style="display:none">
                    <div id="content-text4"></div>
                    <div id="content-text5"></div>
                    <div id="content-text6"></div>
                    
                   
                
    
                <script>
                $(function(){
                $.ajax({url: "https://widgetsdataifx.blob.core.windows.net/semana/semanaindicators", 
                success: function(result){
                $("#content-text1").html(result);
                $("#content-text1").html($(".item-row[data-item='UVR'] .item-value > span ").text());
                $("#content-text2").html(result);
                $("#content-text2").html($(".item-row[data-item='TRM'] .item-value > span ").text());
                $("#content-text3").html(result);
                $("#content-text3").html($(".item-row[data-item='EURCOP'] .item-value > span ").text());
                $("#content-text4").html(result);
                $("#content-text4").html($(".item-row[data-item='DTF'] .item-value > span ").text());
                $("#content-text5").html(result);
                $("#content-text5").html($(".item-row[data-item='OILVAL'] .item-value > span ").text());
                $("#content-text6").html(result);
                $("#content-text6").html($(".item-row[data-item='COFFEE'] .item-value > span ").text());
                }});
                });
        </script>
  
    <script>
    $(document).ready(function() {
        //Ejecutamos método que oculta las cajas
        OcultarContenedores1();
      
        //Cada 6 segundos ejecutamos la función que reinicializa los contenedorees
        setInterval(function() {
          OcultarContenedores2();
        }, 12000);
      
      });
      
      //Método que oculta el primer contenedor para mostrar el otro
      function OcultarContenedores1() {
        setTimeout(function() {
          $("#contenido").hide(6000);
        }, 3000);
      
        setTimeout(function() {
          $("#contenido2").show(12000);
        }, 3000);
      }
      //Método que reinicializa los contenedores
      function OcultarContenedores2() {
        $('#contenido').show(6000);
        $('#contenido2').hide(12000);
      }

      </script>
</body>
</html>

introducir la descripción de la imagen aquí

5
  • Estuve leyendo el código y no se bien realmente que quieres lograr, por que ocultas los 2 contenedores principales, por eso al ejecutar el código no muestra nada Commented el 14 mar. 2019 a las 17:26
  • Como te digo, tengo 6 indicadores económicos, necesito que salgan 3 y se oculten, y después salgan los otros 3 y se oculten, lo que trataba de hacer era duplicar el código y hacerlo con los otros 3 me hago entender? @DanielMauricioSánchezÁvila, en estos momentos me muestra los primeros 3 Commented el 14 mar. 2019 a las 17:28
  • sabes como hacerlo?En verdad necesito ayuda. @DanielMauricioSánchezÁvila Commented el 14 mar. 2019 a las 19:18
  • Con lo que pusiste en la pregunta no es fácil ayudarte enserio Commented el 14 mar. 2019 a las 19:29
  • Mira la imagen que si me salen los primeros 3 y después se ocultan, pero no me salen los otros 3. @DanielMauricioSánchezÁvila, lo que pretendo lograr es que primero salgan 3 y se oculten, salgan los otros 3 y se oculten. Commented el 14 mar. 2019 a las 19:37

2 respuestas 2

4

Que tal, como te va, amigo, espero esto te de ideas o te ayude a solucionar tu problema.

"Edité el código, quizá con este nuevo método tengas más libertad de manipular los tiempos de salida y ocultación de los contenedores, y de esta manera, el método está más optimizado."

$(document).ready(function() {
  function hideShowContainers() {
    //Validamos si contenedor2 tiene la clase 'jsHideContainer'  
    if ($('#contenido2').hasClass('jsHideContainer')) {
      //Eliminamos la clase 'jsHideContainer' para validar la parte negativa del condicional
      $('#contenido2').removeClass('jsHideContainer');
      //Ocultamos el contenedor1 mientras pasan 3 segundos  
      $('#contenido').hide(3000);
      //Mostramos el contenedor2 mientras pasan 3 segundos
      $('#contenido2').show(3000);
    } else {
      //Ocultamos el contenedor2 mientras pasan 3 segundos
      $('#contenido2').hide(3000);
      //Mostramos el contenedor1 mientras pasan 3 segundos
      $('#contenido').show(3000);
      //Finalmente adicionamos la clase jsHideContainer para validar la parte positiva del condicional
      $('#contenido2').addClass('jsHideContainer');
    }
  }

  //Ejecutamos la función para que evalue los condicionales cada 5 segundos
  setInterval(hideShowContainers, 5000);
});
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>

<body>
  <div id="contenido" style="background:#f4f3f2;">
    <div id="content-text">Contenido 1</div>
    <div id="content-text2">Contenido 2</div>
    <div id="content-text3">Contenido 3</div>
  </div>
  <br>
  <div id="contenido2" class="jsHideContainer" style="background:#f1eee3;display:none">
    <div id="content-text4">Contenido 4</div>
    <div id="content-text5">Contenido 5</div>
    <div id="content-text6">Contenido 6</div>
  </div>
</body>

</html>

11
  • Es exactamente lo que necesitaba, mil gracias. Commented el 14 mar. 2019 a las 21:48
  • 1
    De nada, me alegra haber podido ayudarte a resolver tu problema. Commented el 14 mar. 2019 a las 21:52
  • Amigo, mira, me están saliendo los dos al tiempo. Commented el 14 mar. 2019 a las 22:36
  • Mmmm.. Vale, dime en que momento específicamente y miramos Commented el 14 mar. 2019 a las 22:40
  • 1
    Ok, mira Lucas, ahora yo voy a salir, pero en este rato estuve pensado y creo que ya tengo una solición definitiva para tu problema, déjame yo ordeno algunas ideas sueltas y mañana continuamos y te explico mejor, vale? Commented el 14 mar. 2019 a las 23:00
3

puedes hacerlo asi:

Javascript puro:

window.onload = function() {
function mostrar(el, time,infi=false) {
    let p = document.querySelectorAll(el);
    let i = 0;
    // ejecutamos un intervalo de tiempo para los elementos
    let interval = setInterval(() => {
        // validamos que no sea el elemento 0 para aplicarle el none al anterior!
        if (i != 0)p[i - 1].style.display = "none";
        //validamos si es igual al lenght para finalizar el bucle
        if (i == p.length) {
              //retornamos i a 0
              i=0;
            // limpiamos el intervalor para que no se ejecute mas si no es infinito
             if(!infi) clearInterval(interval)
            // retornamos para finalizar la funcion
            return;
        }
        // aplicamos el display block
        p[i].style.display = "block";
        // aumentamos i en 1
        i++;
    }, time)
}

mostrar('main div[id^="contenido"]', 2000);
}
main > div{
  display: none;
}
    <main>
    <div id="contenido1">
        <div id="content-text">Contenido 1</div>
        <div id="content-text2">Contenido 2</div>
        <div id="content-text3">Contenido 3</div>
    </div>
    <div id="contenido2">
        <div id="content-text4">Contenido 4</div>
        <div id="content-text5">Contenido 5</div>
        <div id="content-text6">Contenido 6</div>
    </div>
    <div id="contenido3">
        <div id="content-text7">Contenido 7</div>
        <div id="content-text8">Contenido 8</div>
        <div id="content-text9">Contenido 9</div>
    </div>
    <div id="contenido4">
        <div id="content-text10">Contenido 10</div>
        <div id="content-text11">Contenido 11</div>
        <div id="content-text12">Contenido 12</div>
    </div>
</main>

version jquery con infinito true:

$(document).ready(function(){
function mostrar(el, time,infi=false) {
    let p = $(el);
    let i = 0;
    // ejecutamos un intervalo de tiempo para los elementos
    let interval = setInterval(() => {

        // validamos que no sea el elemento 0 para aplicarle el none al anterior!
        if (i != 0) $(p[i-1]).hide();
        //validamos si es igual al lenght para finalizar el bucle
        if (i == p.length) {
             //retornamos i a 0
              i=0;
            // limpiamos el intervalor para que no se ejecute mas si no es infinito
             if(!infi) clearInterval(interval)
        }
        // aplicamos el display block
        $(p[i]).show("slow");
        // aumentamos i en 1
        i++;
    }, time)
}
mostrar('main div[id^="contenido"]', 2000,true);
});
  main > div{
   display: none;
 } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
        <div id="contenido1">
            <div id="content-text">Contenido 1</div>
            <div id="content-text2">Contenido 2</div>
            <div id="content-text3">Contenido 3</div>
        </div>
        <div id="contenido2">
            <div id="content-text4">Contenido 4</div>
            <div id="content-text5">Contenido 5</div>
            <div id="content-text6">Contenido 6</div>
        </div>
        <div id="contenido3">
            <div id="content-text7">Contenido 7</div>
            <div id="content-text8">Contenido 8</div>
            <div id="content-text9">Contenido 9</div>
        </div>
        <div id="contenido4">
            <div id="content-text10">Contenido 10</div>
            <div id="content-text11">Contenido 11</div>
            <div id="content-text12">Contenido 12</div>
        </div>
    </main>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.