How to convert javascript code to jquery code-CodePudding

I need to convert this javascript code to jquery. How to do it?

import lightGallery from "https://cdn.skypack.dev/[email protected]";

import lgThumbnail from "https://cdn.skypack.dev/[email protected]/plugins/thumbnail";

const $galleryContainer = document.getElementById("gallery-container");

const lg = lightGallery($galleryContainer, {
  speed: 500,
  plugins: [lgThumbnail],
  enableDrag: false,
  enableSwipe: false
});

lg.outer.on("click", (e) => {
  const $item = lg.outer.find(".lg-current .lg-image");
  if (
    e.target.classList.contains("lg-image") ||
    $item.get().contains(e.target)
  ) {
    lg.goToNextSlide();
  }
});

I tried to find an online converter. I managed to find a huge bunch of converters from jQuery to JS, but I need the opposite

CodePudding user response：

To convert the JavaScript code to jQuery, you can use the $() function to select elements from the DOM and call jQuery methods on them instead of using the native DOM API. Here is an example of how you could rewrite the code using jQuery:

import lightGallery from "https://cdn.skypack.dev/[email protected]";
import lgThumbnail from "https://cdn.skypack.dev/[email protected]/plugins/thumbnail";

const $galleryContainer = $("#gallery-container");

const lg = lightGallery($galleryContainer[0], {
  speed: 500,
  plugins: [lgThumbnail],
  enableDrag: false,
  enableSwipe: false
});

$(lg.outer).on("click", (e) => {
  const $item = $(".lg-current .lg-image", lg.outer);
  if (
    e.target.classList.contains("lg-image") ||
    $item.get()[0].contains(e.target)
  ) {
    lg.goToNextSlide();
  }
});

In the code above, we use the $() function to select the #gallery-container element and store it in the $galleryContainer variable. We then pass $galleryContainer[0] (the first element in the jQuery object) to the lightGallery() function instead of $galleryContainer itself.

We also use the $() function to select the lg.outer element and attach an event listener to it using the .on() method. We then use the .find() method to select the .lg-current .lg-image elements within lg.outer.

CodePudding user response：

Here is a jQuery version of the code you provided:

import lightGallery from "https://cdn.skypack.dev/[email protected]";
import lgThumbnail from "https://cdn.skypack.dev/[email protected]/plugins/thumbnail";

const $galleryContainer = $('#gallery-container');

const lg = lightGallery($galleryContainer, {
  speed: 500,
  plugins: [lgThumbnail],
  enableDrag: false,
  enableSwipe: false
});

lg.outer.on('click', (e) => {
  const $item = lg.outer.find('.lg-current .lg-image');
  if (
    $(e.target).hasClass('lg-image') ||
    $item.get().contains(e.target)
  ) {
    lg.goToNextSlide();
  }
});

Some of the main changes include the following:

$ is used instead of document.getElementById to select elements.
.on is used to attach event listeners instead of .addEventListener.
.hasClass is used to check if an element has a certain class, instead of .classList.contains.