Tengo una dificultad, un usuario hace clic y no es un código de fondo, y hacer clic de nuevo tiene que volver al anterior. Esto está sucediendo, pero hacer todo esto nuevamente no funciona, es como si un jquery se ejecutara solo una vez.

Los párrafos pares tienen su color y los párrafos impares tienen su color.

<!DOCTYPE html>
<html>
<body>

<style>

p:nth-child(2n+1){
 	color: green;
    background-color: red;
}

p:nth-child(2n){
color: yellow;
background-color:blue;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

<script>

      $('p:nth-child(2n+1)').click(function(){
     $(this).css('background-color','black').css('color','white');
     $('p:nth-child(2n+1)').click(function(){
        $(this).css('background-color','red').css('color','green');
    });    
  });

    $('p:nth-child(2n)').click(function(){
    $(this).css('background-color','black').css('color','white');
     $('p:nth-child(2n)').click(function(){
        $(this).css('background-color','blue').css('color','yellow');
    });
   
  });


</script>


</body>
</html>
1
Vinícius Vieira 3 mar. 2018 a las 22:35

4 respuestas

La mejor respuesta

Primero no necesita registrar el evento de clic dos veces, o separar cosas para pares e impares, y puede alternar una clase:

$(function(){
  // p:nth-child(2n), p:nth-child(2n+1)
  // p:even, p:odd
  // p
  $('p').click(function() {
    $(this).toggleClass("blackwhite");
  });
});
p:nth-child(2n+1){
 	color: green;
  background-color: red;
}

p:nth-child(2n){
  color: yellow;
  background-color:blue;
}

p.blackwhite {
  background-color:black;
  color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
1
nullqube 3 mar. 2018 a las 20:42

Creo que, como respondió @nullqube, toggleClass es el mejor enfoque, pero también se puede hacer con declaraciones If-Else:

$('p:nth-child(2n+1)').click(function(){
     if($(this).css('background-color') == 'rgb(0, 0, 0)'){
       $(this).css('background-color','red').css('color','green'); 
     } else {
       $(this).css('background-color','black').css('color','white');
     }
  });

  $('p:nth-child(2n)').click(function(){
     if($(this).css('background-color') == 'rgb(0, 0, 0)'){
       $(this).css('background-color','blue').css('color','yellow');      
     } else {
       $(this).css('background-color','black').css('color','white');
     }
  });
p:nth-child(2n+1){
 	color: green;
  background-color: red;
}

p:nth-child(2n){
  color: yellow;
  background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
0
zb22 3 mar. 2018 a las 20:14

No está claro qué function() en su código.

Es posible que desee comprobar esto: Cambiar el color de fondo de una página usando php

0
Andhika Brosnan 5 mar. 2018 a las 05:34

¡Espero que esto ayude!

$('p:nth-child(2n+1)').click(function(){
     if($(this).hasClass('click-child'))
        $(this).removeClass('click-child').addClass('odd-child');
     else
        $(this).removeClass('odd-child').addClass('click-child');
});

$('p:nth-child(2n)').click(function(){
     if($(this).hasClass('click-child'))
        $(this).removeClass('click-child').addClass('even-child');
     else
        $(this).removeClass('even-child').addClass('click-child');
});
.odd-child{
color: yellow;
background-color:blue;
}

.even-child{
color: green;
background-color:red;
}

.click-child{
color: white;
background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="even-child">1</p>
<p class="odd-child">2</p>
<p class="even-child">3</p>
<p class="odd-child">4</p>
<p class="even-child">5</p>
<p class="odd-child">6</p>
0
yajiv 3 mar. 2018 a las 19:54