dev4wp Posted April 24, 2021 Share Posted April 24, 2021 I'm trying to refactor this javascript from this : var modal = document.getElementById("myModal"); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementsByClassName("myImg"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } And this is my attempt but i am stuck : ( function( $ ) { var modal = $('#myModal'); var img = $('.myImg'); var modalImg = $('#img01'); var captionText = $("#caption"); $("img").click(function(){ modal.style.display = "block"; modalImg.src = $this.src; captionText.innerHTML = $this.alt; }); var span = $("close")[0]; $("span").click(function(){ modal.style.display = "none"; }); } ( jQuery ) ); Link to comment Share on other sites More sharing options...
Ingolme Posted April 24, 2021 Share Posted April 24, 2021 If you assign a jQuery result to a variable, you do not need the $() function to use it. This should work, though I haven't tested it so there might be a mistake somewhere. ( function( $ ) { var modal = $('#myModal'); var img = $('.myImg'); var modalImg = $('#img01'); var captionText = $("#caption"); img.click(function(){ modal.show(); modalImg.attr("src", $(this).attr("src")); captionText.html($(this).attr("alt")); }); var span = $(".close").first(); span.click(function(){ modal.hide(); }); } ( jQuery ) ); I do not see any good reason to convert Javascript to jQuery. jQuery is far less efficient and isn't natively built into browsers, requiring a download of an external file before it can run. 1 Link to comment Share on other sites More sharing options...
dev4wp Posted April 24, 2021 Author Share Posted April 24, 2021 (edited) 31 minutes ago, Ingolme said: I do not see any good reason to convert Javascript to jQuery. Excellent. Works great. The reason i wanted to use jQuery is because i couldn't get it to load when using it in a file in WordPress. Edited April 24, 2021 by dev4wp Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now