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

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -