Estoy tratando de crear una secuencia de comandos que cuando se hace clic en un botón cambia la clase de un DIV y luego vuelve a cargar el contenido de ese DIV.
Hasta ahora he creado un script que cambia con éxito la clase del DIV.
document.addEventListener("DOMContentLoaded", function (event) { jQuery("#button").click(function () { document.getElementById("id").className = "newClass"; }); });pero aún lo necesito para recargar el contenido del DIV con la nueva clase. Busqué una solución y encontré el siguiente código que intenté agregar:
$("#id").load(window.location.href + " #id");Pero me da el siguiente error:
(index):470 Uncaught TypeError: $ is not a function¿Qué estoy haciendo mal aquí?
En jQuery simple usarías:
jQuery(function($) { // DOM is now ready and jQuery's $ alias sandboxed $("#button").on("click", function () { $("#id") .addClass("newClass") .load(window.location.href + " #id"); }); }); pero no estoy seguro de por qué usaría el mismo location.href , y cómo se correlaciona eso con cualquier "actualización de contenido".
Además, al hacer lo anterior, obtendrá elementos #id duplicados, uno dentro del otro:
Estado inicial:
<div id="id">Test test test</div>Después de hacer clic en el "Botón" una o más veces:
<div id="id" class="newClass"> <div id="id">Test test test</div> </div>que claramente no es algo que te gustaría .
Al principio, debe asignar jQuery a $ para usar un código como $("#id").load(window.location.href + " #id"); De lo contrario, debe usar jQuery("#id").load(window.location.href + " #id"), como lo hizo en su ejemplo. Esto se hace por:
jQuery(document).ready(function( $ ){ // your Code goes here });También usó JavaScript simple y jQuery para el mismo propósito. document.getElementById("id") es igual a $('#id').
Puede haber muchos nombres de clase, por lo que una función o atributo .className no puede tener sentido. Hay una lista de nombres de clase, y puede agregarlos/eliminarlos por .addClass()/removeClass() en jQuery o .classList.add()/classList.remove() en javaScript simple.
jQuery(document).ready(function( $ ) { $("#button").click(function () { $("#id") .addClass("newClass") .load(window.location.href + " #id"); }); });Y cargue el contenido como lo describió Roko.