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

Question

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

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

在这种情况下，我希望：

如果我点击狮子、狼、老虎、鲨鱼或猎豹，把它改成一对， 第一张图片"仅限捕食者"将更改为混合。

如果我单击"仅限捕食者"并将其更改为"混合"， 全部 - 狮子 - 狼 - 老虎 - 鲨鱼 - 猎豹将更改为其配对

如果我单击"混合"并将其更改为"仅限捕食者" 全部 - 鹿 - 羔羊 - 山羊 - 海豹 - 瞪羚将变为其配对

如果我不断更改和以下内容：狮子 - 狼 - 老虎 - 鲨鱼 - 猎豹再次显示 它将触发使第一个图像按钮显示"仅限捕食者"。

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

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