javascript - 如何在配对图像按钮中制作触发脚本？

Question

寻找一种方法来停用/触发配对图像按钮中的单个或多个按钮。

目前，默认显示为:仅限捕食者 - 狮子 - 狼 - 老虎 - 鲨鱼 - 猎豹

在这种情况下，我想要:

如果我单击狮子或狼或老虎或鲨鱼或猎豹并将其更改为一对，第一张图片“仅限捕食者”将更改为混合图片。

如果我点击“Predator only”并将其更改为“mixed”，所有-狮子-狼-老虎-鲨鱼-猎豹都会变成它的一对

如果我点击“Mixed”并将其更改为“Predator Only”所有 - 鹿 - 羊 - 山羊 - 海豹 - 瞪羚都会变成它的一对

如果我继续更改以下内容:Lion - Wolf - Tiger - Shark - Cheetah 再次显示它将触发使第一个图像按钮显示“Predator only”。

请告诉我如何做到这一点...

$(document).ready(function() {
  $('img').click(function() {
    console.log($(this).siblings());
    $(this).add($(this).siblings()).toggleClass('hide');
  });
});

/* For layout only */
div {
  display: inline-block;
}

/* Used to hide image */
.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
<div>
  <img src="https://s24.postimg.org/3tsfw9psl/Predator.png" />
  <img src="https://s24.postimg.org/nn4joz36d/Mixed.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/ski4a355h/Lion.png" />
  <img src="https://s24.postimg.org/s2myu8fkl/Deer.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/vxvetx51x/Wolf.png" />
  <img src="https://s24.postimg.org/ty9r5e4et/Lamb.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/ll42aq579/Tiger.png" />
  <img src="https://s24.postimg.org/f11a4dr6d/Goat.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/flgb72ket/Shark.png" />
  <img src="https://s4.postimg.org/rk8v1dv9p/Seal.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/wn9595z9x/Cheetah.png" />
  <img src="https://s24.postimg.org/h4bpc1qz9/Gazelle.png" class="hide" />
</div>
</div>

Answer 1

您可以绕过类来了解隐藏的内容。如果捕食者是隐藏的，那么它是混合的，否则它只是捕食者。

当您点击“仅限捕食者”和“混合”按钮时，您还应该能够知道要切换哪一个。

下面的代码应该可以工作

$(document).ready(function() {
  $('img').click(function() {
    $(this).add($(this).siblings()).toggleClass('hide');
    if($(this).attr('id') == 'predator_only') {
      $('.predator:not(.hide)').add($('.predator:not(.hide)').siblings()).toggleClass('hide');
    }
    else if($(this).attr('id') == 'mixed') {
      $('.predator.hide').add($('.predator.hide').siblings()).toggleClass('hide');
    }
    else
    {
      if($('.predator.hide').length > 0) {
        $('#mixed').removeClass('hide');
        $('#predator_only').addClass('hide');
      }
      else {
        $('#mixed').addClass('hide');
        $('#predator_only').removeClass('hide');
      }
    }
  });
});

/* For layout only */
div {
  display: inline-block;
}

/* Used to hide image */
.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
<div>
  <img src="https://s24.postimg.org/3tsfw9psl/Predator.png" id="predator_only"/>
  <img src="https://s24.postimg.org/nn4joz36d/Mixed.png" class="hide" id="mixed"/>
</div>

<div>
  <img src="https://s24.postimg.org/ski4a355h/Lion.png" class="predator" />
  <img src="https://s24.postimg.org/s2myu8fkl/Deer.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/vxvetx51x/Wolf.png" class="predator"/>
  <img src="https://s24.postimg.org/ty9r5e4et/Lamb.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/ll42aq579/Tiger.png" class="predator"/>
  <img src="https://s24.postimg.org/f11a4dr6d/Goat.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/flgb72ket/Shark.png" class="predator"/>
  <img src="https://s4.postimg.org/rk8v1dv9p/Seal.png" class="hide" />
</div>

<div>
  <img src="https://s24.postimg.org/wn9595z9x/Cheetah.png" class="predator"/>
  <img src="https://s24.postimg.org/h4bpc1qz9/Gazelle.png" class="hide" />
</div>
</div>