Переключать изображения по клику со связанными идентификаторами в jQuery

Question

У меня есть повторяющийся компонент с элементом управления, который переключается между отображением 2 изображений (мобильного изображения и изображения рабочего стола).Мне нужно, чтобы каждый элемент управления переключал только тот компонент, в котором он находится, и функционировал независимо от других компонентов.

Я могу генерировать уникальные идентификаторы для всех элементов управления, уникальные идентификаторы для всех изображений и по нажатию кнопки IЯ могу добавлять / удалять классы, а также показывать / скрывать изображения.Моя проблема в том, что я не знаю, как связать идентификатор элемента управления переключением с идентификатором изображения, так что я меняю только один компонент.Прямо сейчас я нацеливаюсь на класс (который одинаков для каждого компонента), поэтому все переключается, когда вы щелкаете элемент управления.

Это внутри Wordpress с использованием Visual Composer, поэтому я не верю, что могу использоватьцикл для рендеринга повторяющихся компонентов.

JSFiddle Здесь

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

<div class="wrapper">
  <div class="platform-toggle">
    <div class="mobile-toggle">
      mobile
    </div>
    <div class="desktop-toggle">
      desktop
    </div>
  </div>
  <div class="platform-images">
    <img class="mobile-image" src="https://via.placeholder.com/100x100.png?text=mobile" />
    <img class="desktop-image" src="https://via.placeholder.com/100x100.png?text=desktop" />
  </div>
</div>

$.each($('.platform-toggle'), function(ind) {
  $(this).attr('id', 'platform-toggle_' + parseInt(ind + 1));
});

$.each($('.mobile-toggle'), function(ind) {
  $(this).attr('id', 'mobile-toggle_' + parseInt(ind + 1));
});

$.each($('.desktop-toggle'), function(ind) {
  $(this).attr('id', 'desktop-toggle_' + parseInt(ind + 1));
});

$.each($('.mobile-image'), function(ind) {
  $(this).attr('id', 'mobile-image_' + parseInt(ind + 1));
});

$.each($('.desktop-image'), function(ind) {
  $(this).attr('id', 'desktop-image_' + parseInt(ind + 1));
});

$(".mobile-toggle").click(function() {
  if ($(".mobile-toggle").hasClass("inactive")) {

    $(".mobile-toggle").removeClass("inactive");
    $(".mobile-toggle").addClass("active");
    $(".mobile-image").show()

    $(".desktop-toggle").removeClass("active");
    $(".desktop-toggle").addClass("inactive");
    $(".desktop-image").hide()
  }
});

$(".desktop-toggle").click(function() {
  if ($(".desktop-toggle").hasClass("inactive")) {

    $(".desktop-toggle").removeClass("inactive");
    $(".desktop-toggle").addClass("active");
    $(".desktop-image").show()

    $(".mobile-toggle").removeClass("active");
    $(".mobile-toggle").addClass("inactive");
    $(".mobile-image").hide()
  }
});

Answer 1

Для этого случая вы бы использовали селектор $ (this) , а в jQuery есть множество функций для поиска элементов parent, sibling, children, next, prev или др.

I 'Мы изменили вашу скрипку и добавили новые селекторы.

JSFiddle

$(".mobile-toggle").click(function() {
  if ($(this).hasClass("inactive")) {
    $(this).removeClass("inactive");
    $(this).addClass("active");

    //find current toggle element parent, then find next element(wrapper of the images) and finally find children image.
    $(this).parent('.platform-toggle').next('.platform-images').children('.mobile-image').show();

    $(this).siblings('.desktop-toggle').removeClass("active");
    $(this).siblings('.desktop-toggle').addClass("inactive");
    $(this).parent('.platform-toggle').next('.platform-images').children('.desktop-image').hide();
  }
});

Answer 2

Это должно быть точно так же, как ответ @ Slim, но с упрощенным кодом, который не перевыбирает одни и те же элементы снова и снова. Селектор $() в jQuery работает быстро, но нет причин продолжать выбирать $(this) 7 раз, если нам не нужно.

$(".mobile-toggle").click(function() {
  var $this = $(this);
  if ($this.hasClass("inactive")) {
    $this.removeClass("inactive").addClass("active");

    //find current toggle element parent, then find next element(wrapper of the images) and finally find children image.
    var $platformImgs = $this.parent('.platform-toggle').next('.platform-images')
    $platformImgs.children('.mobile-image').show();

    $this.siblings('.desktop-toggle').removeClass("active").addClass("inactive");
    $platformImgs.children('.desktop-image').hide();
  }
});

Answer 3

Вы можете использовать родительский div определенного элемента управления следующим образом:

$(".mobile-toggle").click(function() {
var parentObj=$(this).closest(".wrapper");
if ($(parentObj).find(".mobile-toggle").hasClass("inactive")) {
 $(parentObj).find(".mobile-toggle").removeClass("inactive");
 $(parentObj).find(".mobile-toggle").addClass("active");
 $(parentObj).find(".mobile-image").show()

 $(parentObj).find(".desktop-toggle").removeClass("active");
 $(parentObj).find(".desktop-toggle").addClass("inactive");
 $(parentObj).find(".desktop-image").hide()
}
});

$(".desktop-toggle").click(function() {
var parentObj=$(this).closest(".wrapper");
if ($(parentObj).find(".desktop-toggle").hasClass("inactive")) {

$(parentObj).find(".desktop-toggle").removeClass("inactive");
$(parentObj).find(".desktop-toggle").addClass("active");
$(parentObj).find(".desktop-image").show()

$(parentObj).find(".mobile-toggle").removeClass("active");
$(parentObj).find(".mobile-toggle").addClass("inactive");
$(parentObj).find(".mobile-image").hide()
}
});