Change text color when clicking
Question
I'm having a difficulty, a user click and it's not a background code, and clicking again has to go back to the previous one. This is happening, but doing all this again does not go, it's as if a jquery executes only once.
The even paragraphs have their color and the odd paragraphs have their 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>
4 answers
solution1
1 ACCPTED 2018-03-03 19:57:22
first you don't need to register the click event two times, or separate things for odd and evens, and you can toggle a class :
$(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>
solution2
0 2018-03-03 19:43:13
It's not clear what function() in your code.
You might want to check this: Change background color of a page using php
solution3
0 2018-03-03 19:54:46
Hope this helps!
$('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>
solution4
0 2018-03-03 20:14:18
I think as @nullqube answered toggleClass is the best approach, but it can be done with If-Else statements as well:
$('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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.