Question

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

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

在这种情况下，我想要：

如果我点击狮子或狼或老虎或鲨鱼或猎豹并将其改为配对，第一张图片＆＃34;仅限捕食者＆＃34;，将改为混合。

如果我点击＆＃34;仅限捕食者＆＃34;并将其更改为＆＃34; mixed＆＃34;，全部 - 狮子 - 狼 - 虎 - 鲨鱼 - 猎豹将变为它的一对

如果我点击＆＃34;混合＆＃34;并将其改为＆＃34;仅限捕食者＆＃34; All - Deer - Lamb - Goat - Seal - Gazelle将改为配对

如果我不断改变以下内容：狮子 - 狼 - 虎 - 鲨鱼 - 猎豹再次展示它将触发显示第一个图像按钮＆＃34;仅限捕食者＆＃34;。

请告诉我该怎么做......

＆＃13;

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

＆＃13;

/* For layout only */
div {
  display: inline-block;
}

/* Used to hide image */
.hide {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以围绕课程来了解隐藏的内容。如果捕食者被隐藏，那么它就会被混合，否则它只是捕食者。

当你点击＆＃34;捕食者时＃34;和＆＃34;混合＆＃34;按钮，您还应该能够知道要切换的那个。

以下代码应该可以使用

＆＃13;

$(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');
      }
    }
  });
});

＆＃13;

/* For layout only */
div {
  display: inline-block;
}

/* Used to hide image */
.hide {
  display: none;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: