0

Mi código de javascript se ejecuta en cuanto carga la página, cuando se debería ejecutar al darle click a un botón. Aclaro que los tres puntos serían botones del slider, dichos botones deberían pintarse de color verde al darles click, pero los 3 se pintan en cuando carga la página. Gracias de antemano

'use strict'

function slider_inicio(nro_boton){
    $('.nro'+nro_boton).css("backgroundColor","#B3E705");
    $('.info_inicio').css("clipPath","polygon(0 0,100% 0%,100% 100%,0 100%)");
}

$(document).ready(()=>{

    $('.nro1').click(slider_inicio(1));
    $('.nro2').click(slider_inicio(2));
    $('.nro3').click(slider_inicio(3));

});
body, html {
  background-image: url(https://www.anahuac.mx/generacion-anahuac/sites/default/files/2018-02/hyper_x.JPG);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%; }

#inicio {
  width: 100%;
  height: 35rem; }
  #inicio .info_inicio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #208ED1;
    width: 100%;
    height: 35rem;
    padding: 5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-clip-path: polygon(0 0, 40% 0%, 40% 100%, 0 100%);
    clip-path: polygon(0 0, 40% 0%, 40% 100%, 0 100%);
    -webkit-transition: 5s ease-in-out 0s;
    -o-transition: 5s ease-in-out 0s;
    transition: 5s ease-in-out 0s; }
    #inicio .info_inicio h2 {
      color: #B3E705;
      font-family: Raleway;
      font-size: 2rem; }
    #inicio .info_inicio p {
      color: #FAFAFA;
      font-family: WorkSans;
      font-size: 1.2rem;
      width: 25%;
      margin-top: 2.5rem;
      margin-bottom: 5rem; }
    #inicio .info_inicio .iterador_img {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around; }
      #inicio .info_inicio .iterador_img div {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        margin: 0 1rem;
        background-color: #FAFAFA;
        cursor: pointer;
        cursor: hand;
        -webkit-transition: .2s ease-in-out 0s;
        -o-transition: .2s ease-in-out 0s;
        transition: .2s ease-in-out 0s; }
        #inicio .info_inicio .iterador_img div:hover {
          background-color: #c7c7c7; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inicio">

        <div class="info_inicio">

            <h2>Lorem Impsum</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis ex dolorum.</p>
            <div class="iterador_img">
                <div class="nro1" style="background-color:#B3E705;"></div>
                <div class="nro2"></div>
                <div class="nro3"></div>
            </div>

        </div>

    </div>

3 respuestas 3

3

El problema es que al pasar al evento click la llamada a tu función slider_inicio(indice) esta llamada se ejecuta inmediatamente y estarías bindeando al click el resultado de dicha llamada, de ahí que se inicie nada más cargar la página. Lo que tienes que hacer es pasar una referencia a la función. La forma más sencilla (aparte de usar el método on) es encapsular la llamada a slider_inicio(indice) dentro de una function(){}. Así:

'use strict'

function slider_inicio(nro_boton){
    $('.nro'+nro_boton).css("backgroundColor","#B3E705");
    $('.info_inicio').css("clipPath","polygon(0 0,100% 0%,100% 100%,0 100%)");
}

$(document).ready(()=>{
    //Pasamos la referencia a la función
    $('.nro1').click(function(){slider_inicio(1)});
    $('.nro2').click(function(){slider_inicio(2)});
    $('.nro3').click(function(){slider_inicio(3)});

});
body, html {
  background-image: url(https://www.anahuac.mx/generacion-anahuac/sites/default/files/2018-02/hyper_x.JPG);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%; }

#inicio {
  width: 100%;
  height: 35rem; }
  #inicio .info_inicio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #208ED1;
    width: 100%;
    height: 35rem;
    padding: 5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-clip-path: polygon(0 0, 40% 0%, 40% 100%, 0 100%);
    clip-path: polygon(0 0, 40% 0%, 40% 100%, 0 100%);
    -webkit-transition: 5s ease-in-out 0s;
    -o-transition: 5s ease-in-out 0s;
    transition: 5s ease-in-out 0s; }
    #inicio .info_inicio h2 {
      color: #B3E705;
      font-family: Raleway;
      font-size: 2rem; }
    #inicio .info_inicio p {
      color: #FAFAFA;
      font-family: WorkSans;
      font-size: 1.2rem;
      width: 25%;
      margin-top: 2.5rem;
      margin-bottom: 5rem; }
    #inicio .info_inicio .iterador_img {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around; }
      #inicio .info_inicio .iterador_img div {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        margin: 0 1rem;
        background-color: #FAFAFA;
        cursor: pointer;
        cursor: hand;
        -webkit-transition: .2s ease-in-out 0s;
        -o-transition: .2s ease-in-out 0s;
        transition: .2s ease-in-out 0s; }
        #inicio .info_inicio .iterador_img div:hover {
          background-color: #c7c7c7; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inicio">

        <div class="info_inicio">

            <h2>Lorem Impsum</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis ex dolorum.</p>
            <div class="iterador_img">
                <div class="nro1" style="background-color:#B3E705;"></div>
                <div class="nro2"></div>
                <div class="nro3"></div>
            </div>

        </div>

    </div>

Otra opción es pasarle la referencia a la función (sin paréntesis, para que no se ejecute al instante) y pasarle el parámetro así:

'use strict'

function slider_inicio(event){
    console.log(event.data.param1);
    $('.nro'+event.data.param1).css("backgroundColor","#B3E705");
    $('.info_inicio').css("clipPath","polygon(0 0,100% 0%,100% 100%,0 100%)");
}

$(document).ready(()=>{
    $('.nro1').click({param1: "1"},slider_inicio);
    $('.nro2').click({param1: "2"},slider_inicio);
    $('.nro3').click({param1: "3"},slider_inicio);

});
body, html {
  background-image: url(https://www.anahuac.mx/generacion-anahuac/sites/default/files/2018-02/hyper_x.JPG);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%; }

#inicio {
  width: 100%;
  height: 35rem; }
  #inicio .info_inicio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #208ED1;
    width: 100%;
    height: 35rem;
    padding: 5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-clip-path: polygon(0 0, 40% 0%, 40% 100%, 0 100%);
    clip-path: polygon(0 0, 40% 0%, 40% 100%, 0 100%);
    -webkit-transition: 5s ease-in-out 0s;
    -o-transition: 5s ease-in-out 0s;
    transition: 5s ease-in-out 0s; }
    #inicio .info_inicio h2 {
      color: #B3E705;
      font-family: Raleway;
      font-size: 2rem; }
    #inicio .info_inicio p {
      color: #FAFAFA;
      font-family: WorkSans;
      font-size: 1.2rem;
      width: 25%;
      margin-top: 2.5rem;
      margin-bottom: 5rem; }
    #inicio .info_inicio .iterador_img {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around; }
      #inicio .info_inicio .iterador_img div {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        margin: 0 1rem;
        background-color: #FAFAFA;
        cursor: pointer;
        cursor: hand;
        -webkit-transition: .2s ease-in-out 0s;
        -o-transition: .2s ease-in-out 0s;
        transition: .2s ease-in-out 0s; }
        #inicio .info_inicio .iterador_img div:hover {
          background-color: #c7c7c7; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inicio">

        <div class="info_inicio">

            <h2>Lorem Impsum</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis ex dolorum.</p>
            <div class="iterador_img">
                <div class="nro1" style="background-color:#B3E705;"></div>
                <div class="nro2"></div>
                <div class="nro3"></div>
            </div>

        </div>

    </div>

3
  • Muchas gracias, comprendo ahora, lo que me resulta raro es que lo use tal cual al metodo para muchas cosas similares y es la primera vez que me ocurre este problema el 9 ene. 2019 a las 21:55
  • mmm, ¿estás seguro de que lo usas igual? ¿Podrías poner algún ejemplo?
    – Kiko_L
    el 10 ene. 2019 a las 7:13
  • Sisi, lo utilizaba tal cual pero sin pasarle argumentos al evento dentro de la funcion click, nose si tendra que ver. Es decir, yo escribia: elementoJS.click(cualquier_evento) lo escribia asi en la funcion ready del document y funcionaba como queria. el 13 ene. 2019 a las 19:46
1

Estás llamando al método click, el cual dispara el evento click en el elemento que lo llama. Una alternativa es poner un atributo en cada div que lleve la cuenta de sus respectivos índices, de esta manera se pueden recuperar cuando se haga click y pasar el índice a la función para que muestre la animación.

HTML

<div class="nro1" data-index="1" style="background-color:#B3E705;"></div>
<div class="nro2" data-index="2"></div>
<div class="nro3" data-index="3"></div>

JavaScript

$('div[class*=nro]').on('click', function() {
  const index = $(this).attr('data-index')
  slider_inicio(index)
})
5
  • no comprendi del todo bien, pero gracias por responder, tratare de averiguar lo maximo posible sobre lo que me comentaste, Muchas graciass el 9 ene. 2019 a las 2:18
  • 1
    No es correcto, .click() solo provoca el evento cuando no recibe ningún parámetro. Si recibe uno, se comporta como .on('click', param) el 9 ene. 2019 a las 8:35
  • Interesante comportamiento. No lo conocía; te agradezco la anotación, @PabloLozano.
    – gugadev
    el 9 ene. 2019 a las 14:45
  • @Diego ¿Qué cosa no comprendes? El código JavaScript que puse, ponlo dentro de tu document#ready y añade los atributos data-index al HTML igual que el código que puse. Es una opción más dinámica que pasar el índice directamente a la función, como te indica Kiko en su respuesta.
    – gugadev
    el 9 ene. 2019 a las 14:48
  • Nono, es decir, entendi bien tu solucion, lo que no entendi fue porque se originaba el problema el 9 ene. 2019 a las 21:53
0

Cuando llamas al metodo $('.nro1').click(); sin pasarle ningún parámetro dentro del document.ready, estás enviando un evento de click sobre el div al navegador, es decir, es como si llevaras tu puntero al div y presionaras sobre el.

Al ejecutar tu JavaScript, el navegador entra al método $(document).ready() y envía o "simula" clicks sobre los 3 divs, por esa razón el slider empieza automáticamente y los botones se cambian de color.

Una opción para solventar tu problema podría ser decirle al objeto document que escuche a los clicks que se realizan sobre los divs cuya clase CSS empiece por la palabra nro, para hacer esto puedes usar una sentencia como $(document).on('click', 'div[class^="nro"]'). Nota que ahora en lugar de usar un .click() se usa un .on('click').

El método on de jQuery, puede recibir 3 argumentos, el primero será el evento por el cual vamos a escuchar, el segundo un selector de CSS que definirá qué elementos del DOM vamos a bindear al evento y por último recibe un callback, por lo cual todo tu código JavaScript se puede resumir a

$(document).on('click', 'div[class^="nro"]', function() {
    $('div[class^="nro"]').not(this).css("backgroundColor","#FFFFFF");
    $(this).css("backgroundColor", "#B3E705");

    $('.info_inicio').css("clipPath","polygon(0 0,100% 0%,100% 100%,0 100%)");

    console.log('Has clickeado el boton numero', $(this).index());
});

Como el objeto que escucha por el evento es document, no es necesario usar el document.ready que tenías previamente. Te recomiendo leer acerca de eventos en JavaScript y el método on de jQuery

3
  • 1
    No es correcto, .click() solo provoca el evento cuando no recibe ningún parámetro. Si recibe uno, se comporta como .on('click', param) el 9 ene. 2019 a las 8:35
  • Gracias, por la aclaración, corregida la respuesta.
    – Redtiens
    el 9 ene. 2019 a las 11:32
  • Muchas gracias por la ayuda Redtiens, desconocia el comportamiento completa del evento click el 9 ene. 2019 a las 21:58

Tu Respuesta

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

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