Мой сценарий влияет только на определенные изображения, а не на всю страницу?

Question

Я довольно новичок в разработке JavaScript, так как я не окончил университет, у меня есть некоторые проблемы с JavaScript на моей веб-странице. В настоящее время код позволяет всем изображениям на странице увеличиваться в увеличенном виде для указанного изображения. Я бы хотел, чтобы эта работа была только в моей галерее на этой странице. Это возможно? Если так, то как?

Очевидно, что проблема в $("img").click(function(){, но изменение этого параметра в соответствии с определенным классом на странице не работает.

$("img").click(function () {
  const imgClone = $(this).parent();
  $(".gallery-bg").addClass("gallery-bg-block")
  $(".gallery-bg").append(imgClone.clone());
  $(".gallery-bg .img-item img").addClass("animated fadeIn");
  $(".gallery-bg").removeClass("animated fadeOut");
});

$(".gallery-bg").click(function () {
  $(this).addClass("animated fadeOut");
  $(this).children().children().addClass("fadeLeft");
  $(this).children().remove();

  var rmBg = $(this);

  setTimeout(() => {
    rmBg.removeClass("gallery-bg-block");
  }, 400);
});

Я хочу, чтобы этот код использовался с определенными изображениями на веб-странице.

Answer 1

Возможным решением может быть добавление определенного класса к изображениям, на которые вы хотите, чтобы скрипт воздействовал.

<img src="/path/of/image" class="enableMyScript">

$(".enableMyScript").click(function () {
  const imgClone = $(this).parent();
  $(".gallery-bg").addClass("gallery-bg-block")
  $(".gallery-bg").append(imgClone.clone());
  $(".gallery-bg .img-item img").addClass("animated fadeIn");
  $(".gallery-bg").removeClass("animated fadeOut");
});