gouf
9/29/2014 - 7:21 PM

ループ構文でクリックイベントをバインドする

ループ構文でクリックイベントをバインドする

event_binding_in_loop.js
content_copyfile_download
/*
 * <body>
 *  <div class="a1" />
 *  <div id="a1" />
 *  <div class="a2" />
 *  <div id="a2" />
 *  <div class="a3" />
 *  <div id="a3" />
 * </body>
 */

$(document).ready(function() {
  for(var i = 1; i < 4; i++) {
    (function(){
      var name = '.a' + i;
      var target = '#a' + i;
      $(name).bind('click', function() {
        toggleSlides(target);
      });
    })();
  }
});

function toggleSlides(name){
  for(var i = 0; i < 4; i++) {
    var target = '#a' + i;
    if(name !== target) {
      $(target).slideUp();
    }
  }
  $(name).slideDown();
}

/*
 * body {
 *   background: #FEFEFE;
 * }
 * div {
 *   display: block;
 *   width: 200px;
 *   height: 30px;
 *   background: orange;
 *   border: thin solid black;
 *   margin: 5px;
 * }
 * 
 * #a1, #a2, #a3 {
 *   display: none;
 *   width: 900px;
 *   height: 80px;
 *   background: pink;
 * }
 * #a1 {
 *   display: block;
 * }
 */