Question

我有一个重复的组件，它的控件可以在显示2张图像（移动图像和桌面图像）之间切换。我需要每个控件仅切换其所在的组件，并独立于其他每个组件运行。

我能够为所有控件生成唯一的ID，为所有图像生成唯一的ID，然后单击以添加/删除类以及显示/隐藏图像。我的问题是我不知道如何将切换控件ID与图像ID相关联，因此我只更改了一个组件。现在，我针对的是类（每个组件都相同），因此单击控件时所有内容都会切换。

这是在使用Visual Composer的Wordpress中进行的操作，因此我认为我无法使用循环来呈现重复的组件。

JSFiddle Here

以下是单个组件，将重复多次

<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

您可以通过以下方式使用特定控件的父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()
}
});

Answer 2

在这种情况下，您将使用 $（this）选择器，并且jQuery具有许多功能来查找父元素，同级元素，子元素，next，prev等元素。

我已经更改了您的小提琴并添加了新的选择器。

JSFiddle

Answer 3

这应该与@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();
  }
});

单击时在jQuery中切换具有关联ID的图像

以下是单个组件，将重复多次

3 个答案: