1

Hola Tengo el siguiente código jQuery para hacer funcionar una linea de tiempo, cumple su función, pero veo que es muy extenso y no se me ha ocurrido una forma de reducirlo soy nuevo en jQuery

 jQuery("#item1").show();
 jQuery("#item2").hide();
 jQuery("#item3").hide();
 jQuery("#item4").hide();
 jQuery("#item5").hide();



jQuery(".time1").click(function(){

jQuery("#item1").show();
jQuery("#item2").hide();
jQuery("#item3").hide();
jQuery("#item4").hide();
jQuery("#item5").hide();
});

jQuery(".time2").click(function(){

jQuery("#item2").show();
jQuery("#item1").show();
jQuery("#item3").hide();
jQuery("#item4").hide();
jQuery("#item5").hide();
});

jQuery(".time3").click(function(){

jQuery("#item3").show();
jQuery("#item2").show();
jQuery("#item1").show();
jQuery("#item4").hide();
jQuery("#item5").hide();
});

jQuery(".time4").click(function(){

jQuery("#item4").show();
jQuery("#item2").show();
jQuery("#item3").show();
jQuery("#item1").show();
jQuery("#item5").hide();
});

jQuery(".time5").click(function(){

jQuery("#item5").show();
jQuery("#item2").show();
jQuery("#item3").show();
jQuery("#item1").show();
jQuery("#item4").show();
});

/* HTML*/

            <div class="timeline-steps aos-init aos-animate" 
 data-aos="fade-up">
                <div class="timeline-step time1">
                    <div class="timeline-content" data- 
  toggle="popover" data-trigger="hover" data-placement="top" 
 title="" data-content="And here's some amazing content. It's 
 very engaging. Right?" data-original-title="2003">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2003</p>
                        <p class="h6 text-muted mb-0 mb-lg-0" 
 id="item1">Favland Founded</p>
                    </div>
                </div>
                <div class="timeline-step time2">
                    <div class="timeline-content" data- 
 toggle="popover" data-trigger="hover" data-placement="top" 
 title="" data-content="And here's some amazing content. It's 
 very engaging. Right?" data-original-title="2004">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2004</p>
                        <p class="h6 text-muted mb-0 mb-lg-0" 
 id="item2">Launched Trello</p>
                    </div>
                </div>
                <div class="timeline-step time3">
                    <div class="timeline-content" data- 
 toggle="popover" data-trigger="hover" data-placement="top" 
 title="" data-content="And here's some amazing content. It's 
 very engaging. Right?" data-original-title="2005">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2005</p>
                        <p class="h6 text-muted mb-0 mb-lg-0" 
 id="item3">Launched Messanger</p>
                    </div>
                </div>
                <div class="timeline-step time4">
                    <div class="timeline-content" data- 
 toggle="popover" data-trigger="hover" data-placement="top" 
 title="" data-content="And here's some amazing content. It's 
  very engaging. Right?" data-original-title="2010">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2010</p>
                        <p class="h6 text-muted mb-0 mb-lg-0" 
  id="item4">Open New Branch</p>
                    </div>
                </div>
                <div class="timeline-step mb-0 time5">
                    <div class="timeline-content" data- 
  toggle="popover" data-trigger="hover" data-placement="top" 
  title="" data-content="And here's some amazing content. It's 
  very engaging. Right?" data-original-title="2020">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2020</p>
                        <p class="h6 text-muted mb-0 mb-lg-0" 
  id="item5">In Fortune 500</p>
                    </div>
                </div>
            </div>
 

si pueden ayudarme a iterar los elementos para no repetir el código se los agradecería. estaba pensando en un ciclo for ya que estaré controlando los nuevos elementos. la linea de tiempo tiene la siguiente lógica:

  • ---- * ----- * ----- * comienza con el primer elemento visible y los otros ocultos cuando le doy click al segundo, queda visible el primero y el segundo y así con todos, lo mismo a dejar oculto. si le doy al primer elemento todos los demas quedaran ocultos.
2
  • podrias incluir tu structura html? un ejemplo minimo!
    – Bryro
    Commented el 27 may. 2022 a las 19:23
  • ahora añadí el html Commented el 27 may. 2022 a las 19:29

3 respuestas 3

2

Podrías usar:

Ejemplo:

jQuery(".time").click(function() {
  // Ocultamos todos los elemento que tienen id que empieza con "item..
  jQuery('[id^="item"]').hide();
  // Obtenemos el dato count
  let count = parseInt($(this).data('count'));
  // Mostramos los items con id igual a "itemX"
  for (let i = 1; i <= count; i++) jQuery("#item" + i).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="item1">Item 1</div>
<div id="item2">Item 2</div>
<div id="item3">Item 3</div>
<div id="item4">Item 4</div>
<div id="item5">Item 5</div>

<button class="time" data-count="1">Time 1</button>
<button class="time" data-count="2">Time 2</button>
<button class="time" data-count="3">Time 3</button>
<button class="time" data-count="4">Time 4</button>


Actualización:

Utilizando tu HTML, podrías hacerlo así:

Ejemplo:

jQuery(".timeline-step").click(function() {
  // Obtenemos todos los hermanos
  let childs = jQuery(this).parent().children();

  // Ocultamos todos los elemento que tienen atributo id y que empieza con "item...
  childs.find('[id^="item"]').hide();

  // Obtenemos la posición del elemento click-eado
  let pos = jQuery(this).index();

  // Mostramos los "item" en los hermanos hasta llegar al click-eado
  for (let i = 0; i <= pos; i++) childs.eq(i).find('[id^="item"]').show();
});

// Iniciamos haciendo click en el primero
jQuery('.time1').click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="timeline-steps aos-init aos-animate" data-aos="fade-up">
  <div class="timeline-step time1">
    <div class="timeline-content" data- toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's 
 very engaging. Right?" data-original-title="2003">
      <div class="inner-circle"></div>
      <p class="h6 mt-3 mb-1">2003</p>
      <p class="h6 text-muted mb-0 mb-lg-0" id="item1">Favland Founded</p>
    </div>
  </div>
  <div class="timeline-step time2">
    <div class="timeline-content" data- toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's 
 very engaging. Right?" data-original-title="2004">
      <div class="inner-circle"></div>
      <p class="h6 mt-3 mb-1">2004</p>
      <p class="h6 text-muted mb-0 mb-lg-0" id="item2">Launched Trello</p>
    </div>
  </div>
  <div class="timeline-step time3">
    <div class="timeline-content" data- toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's 
 very engaging. Right?" data-original-title="2005">
      <div class="inner-circle"></div>
      <p class="h6 mt-3 mb-1">2005</p>
      <p class="h6 text-muted mb-0 mb-lg-0" id="item3">Launched Messanger</p>
    </div>
  </div>
  <div class="timeline-step time4">
    <div class="timeline-content" data- toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's 
  very engaging. Right?" data-original-title="2010">
      <div class="inner-circle"></div>
      <p class="h6 mt-3 mb-1">2010</p>
      <p class="h6 text-muted mb-0 mb-lg-0" id="item4">Open New Branch</p>
    </div>
  </div>
  <div class="timeline-step mb-0 time5">
    <div class="timeline-content" data- toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's 
  very engaging. Right?" data-original-title="2020">
      <div class="inner-circle"></div>
      <p class="h6 mt-3 mb-1">2020</p>
      <p class="h6 text-muted mb-0 mb-lg-0" id="item5">In Fortune 500</p>
    </div>
  </div>
</div>

8
  • Genial, lo reviso Commented el 27 may. 2022 a las 19:30
  • Hola, no me ha funcionado. porque estoy usando clases diferentes al hacer click, son distintos elementos. cada punto de la lina de tiempo tiene una clase Commented el 30 may. 2022 a las 14:09
  • si, es necesario todos las clases, porque son puntos distintos en el mapa Commented el 30 may. 2022 a las 18:09
  • pcg.mgconsulting.cl/el-proyecto esta es la linea de tiempo para que puedas entender el funcionamiento Commented el 30 may. 2022 a las 18:23
  • Entiendo cual es el funcionamiento y también veo que funciona. ¿Hay algún problema? ¿Quisieras que actualize mi respuesta utilizando tu código?
    – Marcos
    Commented el 30 may. 2022 a las 18:49
1

puedes hacerlo asi:

jQuery(".timeline-step").click(function(e){
       // ocultamos todos los items p que empiense con id item
       jQuery("p[id^='item']").hide();
       // e es el evento 
       // del cual recuperamos el currentTarget
       // el elemento asociado al evento
       // se lo pasamos a jquery y elegimos el elemento p hijo 
       jQuery(event.currentTarget).find("p[id^='item']").show()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeline-steps aos-init aos-animate" 
 data-aos="fade-up">
                <div class="timeline-step time1">
                    <div class="timeline-content" data- 
  toggle="popover" data-trigger="hover" data-placement="top" 
 title="" data-content="And here's some amazing content. It's 
 very engaging. Right?" data-original-title="2003">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2003</p>
                        <p class="h6 text-muted mb-0 mb-lg-0" 
 id="item1">Favland Founded</p>
                    </div>
                </div>
                <div class="timeline-step time2">
                    <div class="timeline-content" data- 
 toggle="popover" data-trigger="hover" data-placement="top" 
 title="" data-content="And here's some amazing content. It's 
 very engaging. Right?" data-original-title="2004">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2004</p>
                        <p class="h6 text-muted mb-0 mb-lg-0" 
 id="item2">Launched Trello</p>
                    </div>
                </div>
                <div class="timeline-step time3">
                    <div class="timeline-content" data- 
 toggle="popover" data-trigger="hover" data-placement="top" 
 title="" data-content="And here's some amazing content. It's 
 very engaging. Right?" data-original-title="2005">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2005</p>
                        <p class="h6 text-muted mb-0 mb-lg-0" 
 id="item3">Launched Messanger</p>
                    </div>
                </div>
                <div class="timeline-step time4">
                    <div class="timeline-content" data- 
 toggle="popover" data-trigger="hover" data-placement="top" 
 title="" data-content="And here's some amazing content. It's 
  very engaging. Right?" data-original-title="2010">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2010</p>
                        <p class="h6 text-muted mb-0 mb-lg-0" 
  id="item4">Open New Branch</p>
                    </div>
                </div>
                <div class="timeline-step mb-0 time5">
                    <div class="timeline-content" data- 
  toggle="popover" data-trigger="hover" data-placement="top" 
  title="" data-content="And here's some amazing content. It's 
  very engaging. Right?" data-original-title="2020">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2020</p>
                        <p class="h6 text-muted mb-0 mb-lg-0" 
  id="item5">In Fortune 500</p>
                    </div>
                </div>
            </div>

0
0

Código jQuery:

function showItemsUntil(intItemNumber) // void
{
    let position = intItemNumber;
    while (position > 0) {
        const itemId = strIdStart + position;
        jQuery(itemId).show();

        position--;
    }
}
function hideItemsFrom(intItemNumber, position) // void
{
    while (position > intItemNumber) {
        const itemId = strIdStart + position;
        jQuery(itemId).hide();

        position--
    }
}
function setItemsVisibility(intItemNumber, total) // void
{
    showItemsUntil(intItemNumber);
    hideItemsFrom(intItemNumber, total);
}

// Run script ///////////////////////////////////

const totalItems = 5;
const strIdStart = '#item';

// Replace next lines
// jQuery("#item1").show();
// jQuery("#item2").hide();
// jQuery("#item3").hide();
// jQuery("#item4").hide();
// jQuery("#item5").hide();
setItemsVisibility(1);


jQuery(".time1").click(function(){
    // Replace next lines
    // jQuery("#item1").show();
    // jQuery("#item2").hide();
    // jQuery("#item3").hide();
    // jQuery("#item4").hide();
    // jQuery("#item5").hide();
    setItemsVisibility(1, totalItems);
});

jQuery(".time2").click(function(){
    // Replace next lines
    // jQuery("#item2").show();
    // jQuery("#item1").show();
    // jQuery("#item3").hide();
    // jQuery("#item4").hide();
    // jQuery("#item5").hide();
    setItemsVisibility(2, totalItems);
});

jQuery(".time3").click(function(){
    // Replace next lines
    // jQuery("#item3").show();
    // jQuery("#item2").show();
    // jQuery("#item1").show();
    // jQuery("#item4").hide();
    // jQuery("#item5").hide();
    setItemsVisibility(3, totalItems);
});

jQuery(".time4").click(function(){
    // Replace next lines
    // jQuery("#item4").show();
    // jQuery("#item2").show();
    // jQuery("#item3").show();
    // jQuery("#item1").show();
    // jQuery("#item5").hide();
    setItemsVisibility(4, totalItems);
});

jQuery(".time5").click(function(){
    // Replace next lines
    // jQuery("#item5").show();
    // jQuery("#item2").show();
    // jQuery("#item3").show();
    // jQuery("#item1").show();
    // jQuery("#item4").show();
    setItemsVisibility(5, totalItems);
});

Al final hay cierto número de elementos a controlar. Se empieza mostrando el primero y controlando después el número que se clica de forma que hasta ese número se muestren los elementos y por encima del mismo estos se oculten.

Condensandolo un poco, a las funciones anteriores añado otra que controla los elementos clicados, y el código quedaría:

function showItemsUntil(intItemNumber) // void
{
    let position = intItemNumber;
    while (position > 0) {
        const itemId = strIdStart + position;
        jQuery(itemId).show();

        position--;
    }
}
function hideItemsFrom(intItemNumber, position) // void
{
    while (position > intItemNumber) {
        const itemId = strIdStart + position;
        jQuery(itemId).hide();

        position--
    }
}
function setItemsVisibility(intItemNumber, total) // void
{
    showItemsUntil(intItemNumber);
    hideItemsFrom(intItemNumber, total);
}
function handleClicksUntil(total) // void
{
    let position = total;
    while (intElementsTotal > 0) {
        const className = classNameStart + position;
        jQuery(className).click(function () {
            setItemsVisibility(position, total);
        });
        position--;
    }
}

// Run script ///////////////////////////////////

const strIdStart = '#item';
const classNameStart = '.time';
const totalElements = 5;

setItemsVisibility(1, totalElements);
handleClicksUntil(totalElements);

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.