• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

506
Views
Usando Jquery, cómo cambiar el color con la condición if/else

De hecho, tengo 2 cajas, id llamada box1 y box2.

Estoy usando J-query.

Mi diseño:

Haga clic en box1 => marque el color de fondo de box2, si es negro, cámbielo a blanco, de lo contrario, cambie a negro.

Mi código duro:

 <body> <div id="box1"></div> <div id="box2"></div> </body> $( document ).ready(function() { $("#box1").click(function(){ if ($('#box2').css({backgroundColor: 'white'})) { $('#box2').css({backgroundColor: 'black'}); } else { $('#box2').css({backgroundColor: 'white'}); } }); });
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Como verá en el fragmento aquí, jQuery informa el valor RGB de la celda para su color de fondo. Es mucho más fácil usar clases para este tipo de cosas. en este caso, solo puede usar toggleClass()

Además, para que conste, su declaración IF estaba mal formada:

 if ($('#box2').css({backgroundColor: 'white'})) {

debiera ser

 if ($('#box2').css('background-color') == 'white') {

... pero fallaría porque en realidad es rgb(255, 255, 255) , no white

 $(document).ready(function() { $("#box1").click(function() { console.log('The background color of box 2 is: ', $('#box2').css('background-color')) $("#box2").toggleClass('black'); }); });
 div { padding: 10px; display:inline-block; margin-right:10px; border: 1px solid #ccc; background-color: white; } .black { background-color: black; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box1"></div> <div id="box2"></div>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error