0

La clase card no cambia de color:

Y ya intenté varias cosas y no sé qué hacer, no sé cual error cometí en mi código. Me fijé si eran las variables o las clases, pero no era eso, creo. Abajo les dejo mi código:

(function () {
  var select = globalVariable.theme;

  if (select == "dark") {
    var tema2 = "#242832";
    var color1 = "#ffffff";
    var tema3 = "#212529";
    var borde2 = "0.5px solid #1A1C20";

    $("#nav").removeClass("bg-light");
    $("#nav").addClass("bg-dark");
    $("#nav").removeClass("navbar-light");
    $("#nav").addClass("navbar-dark");
    $(".color").css("color", color1);
    $(".card").css("background", tema3);
    $(".color").css("border", borde2);
    $("#main").css("background", tema2);
    $("#icon").addClass("light");
    $("#icon").css("color", color1);
    $("#icon").css("font-size", "40px");
  } else if (select == "light") {
    var tema4 = "#ffffff";
    var color3 = "#000000";
    var borde3 = "0.5px solid #cccccc";

    $("#nav").removeClass("bg-dark");
    $("#nav").addClass("bg-light");
    $("#icon").css("color", color3);
    $("#nav").removeClass("navbar-dark");
    $("#nav").addClass("navbar-light");
    $(".card").css("color", color3);
    $(".card").css("background", tema4);
    $(".card").css("border", borde3);

    $("#main").css("background", tema4);
  }

  $("#dark").on("click", function () {
    var tema = "#242832";
    var color = "#ffffff";
    var tema1 = "#212529";
    var borde = "0.5px solid #1A1C20";

    $("#nav").removeClass("bg-light");
    $("#nav").addClass("bg-dark");
    $("#nav").removeClass("navbar-light");
    $("#nav").addClass("navbar-dark");
    $("#color").css("color", color);
    $("#color").css("background", tema);
    $("#color").css("border", borde);
    $("#main").css("background", tema);
    $("#icon").addClass("light");
    $("#icon").css("color", color);
    $("#icon").css("font-size", "40px");

    var theme = "dark";

    window.location.href = window.location.href + "?theme=" + theme;
  });

  $("#light").on("click", function () {
    var tema = "#ffffff";
    var color = "#000000";
    var borde = "0.5px solid #cccccc";

    $("#nav").removeClass("bg-dark");
    $("#nav").addClass("bg-light");
    $("#icon").css("color", color);
    $("#nav").removeClass("navbar-dark");
    $("#nav").addClass("navbar-light");
    $(".card").css("color", color);
    $(".card").css("background", tema);
    $(".card").css("border", borde);
    $("#main").css("background", tema);

    var theme = "light";
    window.location.href = window.location.href + "?theme=" + theme;
  });
})();

Esta es la parte del código HTML que quiero que cambie de color:

<div class="card word" id="card">
    <a href="entrar? class="ellink">
        <img src="" class="card-img-top" alt="">
    </a>
    
    <div class="card-body">
        <h5 class="card-title"></h5>
        <p class="card-text des">$100</p>
        <p class="card-text envio">envio gratis</p>
    </div>
</div>

No hay mensaje de error en la consola solo no cambia de color el fondo y es extraño por que luego ejecutó la misma instrucción pero desde la consola e inmediatamente me cambia el color tal como quería, la variable select no tiene importancia en mi problema es solo para que se ejecute pero se ejecuta casi todo excepto el estilo aplicado a la clase card. Las demás clases agregadas no tienen background en mi estilos css.

5
  • el elemento html que quiero es un <div class="card word color" id="card"></div> Commented el 5 sept. 2021 a las 0:38
  • Por favor, revisa como hacer un pregunta quizás esto pueda darte la respuesta de tu última pregunta. Gracias
    – Lilibeth
    Commented el 5 sept. 2021 a las 1:02
  • Eso te lo dice por que estas dando pocos detalles, lee Cómo preguntar
    – Christian
    Commented el 5 sept. 2021 a las 1:05
  • ¿Cuál es el error que obtienes? Decir "no funciona" no es suficiente, revisa la consola del navegador. Edita la pregunta para agregar información del error y, de paso, cómo defines globalVariable.
    – Triby
    Commented el 5 sept. 2021 a las 3:04
  • No hay mensaje de error en la consola solo no cambia de color el fondo y es extraño por que luego ejecutó la misma instrucción pero desde la consola e inmediatamente me cambia el color tal como quería. Commented el 6 sept. 2021 a las 3:32

1 respuesta 1

0

varias cosas, tu clase card esta justo con una clase word, asegurate que el CSS de la clase word no este interfiriendo con la clase card porque en ese caso podrias darle un background:#567, y no te funcionara porque word le esta dando background ya or su clase.

Lo otro puede ser que es lo mas probable que la clase word usa un

background:#567 !important

Y el codigo del css important es de prioridad frente al tuyo Asi que en ese caso podrias ponerle important a tu codigo tambien o eliminar el que trae por defecto el quien te da estilo al card que debe ser Bootstrap

1
  • no es eso, pues ya había ejecutado la instrucción antes pero con un botón en vez de una condicional y funciono, pero con la condición no funciona por alguna razón, la variable esta bien definida, algo ha de estar mal en el elemento pero no son sus estilos css, algo más que debe estar fallando en el código jQuery. Commented el 7 sept. 2021 a las 22:18

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.