En esta tarea, se me proporciona la página HTML y no puedo realizar cambios en la página HTML. Mi tarea es agregar una imagen al sitio web usando JQuery. El código es el dado para la página HTML:
<!-- Sign Up --> <template id="signUp"> <form @submit.prevent='onSubmit' ref='form' action="" class='register-form'> <h2>New Account</h2> ... <input type="submit" :disabled='!isFormValid' value='Register'> </form> </template> <!-- Sign In --> <template id="signinIn"> <form ref='form' @submit.prevent='handleForm' action="" class='signin-form'> <h2>Sign In</h2> ... <input :disabled='!isFormValid' type="submit" value="Sign In"> </form> </template> La tarea quiere que agreguemos una imagen encima de la etiqueta h2 de Nueva cuenta y de Inicio de sesión mediante el uso de JQuery. El código es el siguiente:
$(document).ready(function () { console.log("Document ready"); const $form = $("form"); const $body = $("body"); const $wrapper = $("<div class='wrapper flex-column'>"); // function to add logo above form const addImage = (form) => { form.find("h2").prepend(` <div class='logo flex-row'> <img src='./assets/image.png' alt="logo" /> </div> `); }; // wrap body contents $body.wrapInner($wrapper); addImage($form); }); La idea es agregar la imagen sobre la etiqueta h2 desde el registro y el inicio de sesión. El problema con el que me encuentro es que solo obtengo una imagen sobre la etiqueta h2 de la cuenta nueva y no para ambas. ¿Alguna sugerencia?
Puede reducir todo su código jQuery a lo siguiente:
$( "form h2" ).before("<div>hi</div>");Luego sustituya el código que desea por su imagen donde puse el div para decir "hola".
Esto funciona usando la magia de lo siguiente:
Selectores jQuery: https://www.w3schools.com/jquery/jquery_selectors.asp
método jQuery before(): https://api.jquery.com/before/
Para el selector, estás diciendo "dame todos los elementos h2 que están dentro de un elemento de formulario". Luego simplemente ejecute el método before() en esa lista devuelta.