1

Tengo el siguiente inconveniente:

El propósito del código es cambiar a la siguiente clase CSS mediante jQuery:

Clase CSS:

.linkdestacacursos {
  color: #f00;
  font-weight: bold;
  margin-left: 25px;
}

Importo la librería jQuery de la siguiente manera: https://code.jquery.com/

uncompressed . copio y pego debajo del CSS:

<script src="https://code.jquery.com/jquery-3.5.1.js">

Funciones jQuery:

$(document).ready(function () {
  document
    .getElementById("cursos")
    .addEventListener("click", resaltarcursos, false);
  document
    .getElementById("informacion")
    .addEventListener("click", realtarejemplos, false);
});

function resaltarcursos() {
  $(".cursos").toggleClass("linkdestacacursos");
}

function resaltarejemplos() {}
4
  • 1
    Por favor, edita tu pregunta para mejorar el formato de tu código. No logro reproducir el problema; ¿qué tienes en el html? Agrega un ejemplo mínimo verificable.
    – padaleiana
    Commented el 14 feb. 2021 a las 13:39
  • en el html tengo enlaces para resaltar PJ: <a href="google.com" target="_blank" class="cursos"> Google </a><br>
    – gabriel
    Commented el 14 feb. 2021 a las 13:42
  • Te falta el id...
    – padaleiana
    Commented el 14 feb. 2021 a las 13:45
  • Por qué usar document.getElementById("cursos").addEventListener("click") (que es vanilla Javascript) y no $("#cursos").click( ... )? Estas importando jQuery pero no lo estas usando Commented el 14 feb. 2021 a las 14:08

1 respuesta 1

1

Tomando en cuenta lo que mencionas, cito:

El propósito del código es cambiar a la siguiente clase CSS mediante jQuery

Además, de este:

function resaltarcursos() {
  $(".cursos").toggleClass("linkdestacacursos");
}

Se entiende que lo que deseas hacer es alternar entre colocar la clase .linkdestacacursos y quitarla mediante el método .toggleClass() de jQuery.

Aclaratoria

Pero, antes hay que hacer una pequeña aclaratoria y se relaciona con las siguientes líneas, cito:

$(document).ready(function () {
  document
    .getElementById("cursos")
    .addEventListener("click", resaltarcursos, false);
  document
    .getElementById("informacion")
    .addEventListener("click", realtarejemplos, false);
});

Aquí estás utilizando una combinación de Vanilla JS con jQuery, pero si deseas utilizar únicamente la segunda podrías escribirlo así:

$(function () {
  $("#cursos").on("click", resaltarcursos);
  $("#informacion").on("click", resaltarejemplos);
});

Por otra parte, jQuery recomienda utilizar a partir de la versión 3.0 las siguientes líneas:

$(function() {
    ...
});

En lugar de esta:

$(document).ready(function() {
    ...
});

Porque esta última ha sido declarada obsoleta.

Ver ejemplo completo

Ahora vamos a correr el ejemplo completo. Pero, en esta oportunidad, agregaremos los HTML faltante para completarlo:

$(function () {
    $("#cursos").on("click", resaltarcursos);
});

function resaltarcursos() {
  $(".cursos").toggleClass("linkdestacacursos");
}
.linkdestacacursos {
  color: #f00;
  font-weight: bold;
  margin-left: 25px;
}

.cursos {
  transition: 300ms ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" id="cursos" class="cursos">Cursos</a>
<a href="#" id="informacion">Información</a>

La siguiente línea se omite en el ejemplo anterior:

$("#informacion").on("click", resaltarejemplos);

Que ejecuta la siguiente función:

function resaltarejemplos() {}

Porque no hay nada que hacer allí, dado que la función no realiza ninguna acción.

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.