javascript - How to make 2nd Trigger script in paired image button? -
set scripted paired button image. when click image, change pair or set of image.
now if have set, set b, , want make set b work set without disrupting each other. how this? tried give set b new unique id confused how integrate new id in script.
$(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'); } } }); });
/* layout */ div { display: inline-block; } /* used hide image */ .hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> set a: <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> <br><br> set b: <div> <div> <img src="https://s24.postimg.org/3tsfw9psl/predator.png" id="predator_only2"/> <img src="https://s24.postimg.org/nn4joz36d/mixed.png" class="hide" id="mixed2"/> </div> <div> <img src="https://s24.postimg.org/ski4a355h/lion.png" class="predator2" /> <img src="https://s24.postimg.org/s2myu8fkl/deer.png" class="hide" /> </div> <div> <img src="https://s24.postimg.org/vxvetx51x/wolf.png" class="predator2"/> <img src="https://s24.postimg.org/ty9r5e4et/lamb.png" class="hide" /> </div> <div> <img src="https://s24.postimg.org/ll42aq579/tiger.png" class="predator2"/> <img src="https://s24.postimg.org/f11a4dr6d/goat.png" class="hide" /> </div> <div> <img src="https://s24.postimg.org/flgb72ket/shark.png" class="predator2"/> <img src="https://s4.postimg.org/rk8v1dv9p/seal.png" class="hide" /> </div> <div> <img src="https://s24.postimg.org/wn9595z9x/cheetah.png" class="predator2"/> <img src="https://s24.postimg.org/h4bpc1qz9/gazelle.png" class="hide" /> </div> </div>
Comments
Post a Comment