clickイベントがchromeで動作しない

$(function() {

$(".on").addClass('display');
 
$(".off").addClass('hide');

		
$(".a1").click(function() {
	
	$("#a1").slideDown(); 
	$("#a2").slideUp();
	$("#a3").slideUp();	

});

$(".a2").click(function() {
	
	
	$("#a1").slideUp(); 
	$("#a2").slideDown();		 
   
});


$(".a3_1").click(function() {
	
	$("#a4").slideDown(); 
	$("#a5").slideUp();
	$("#a6").slideDown();
	$("#a7").slideDown();
	$("#a9").slideDown();	
   
});	

$(".a3_2").click(function() {
	
	$("#a4").slideUp(); 
	$("#a5").slideDown();
	$("#a6").slideUp();
	$("#a7").slideUp();
	$("#a9").slideUp();	
   
});


$(".a4").click(function() {
	
	
		
	$("#a3").slideDown();
	$("#a4").slideDown();	
	$("#a5").slideUp();
	$("#a6").slideDown();	
	$("#a7").slideDown();	
	$("#a9").slideDown();	 
   
});

$(".a5").click(function() {
		
	$("#a3").slideUp();
	$("#a4").slideUp();	
	$("#a5").slideDown();
	$("#a6").slideUp();	
	$("#a7").slideUp();	
	$("#a9").slideUp();	 
   
});


$(".a6_1").click(function() {
	
	$("#a10").slideDown();
	$("#a11").slideUp();

});

$(".a6_2").click(function() {
		
	$("#a10").slideUp();
	$("#a11").slideDown();
   
});


$(".a7_1").click(function() {
		
	$("#a12").slideDown();
	$("#a13").slideUp();
	$("#a14").slideDown();
	$("#a15").slideDown();
	$("#a17").slideDown();
   
});

$(".a7_2").click(function() {
		
	$("#a12").slideUp();
	$("#a13").slideDown();
	$("#a14").slideUp();
	$("#a15").slideUp();
	$("#a17").slideUp();
   
});


$(".a8_1").click(function() {
		
	$("#a12").slideDown();
	$("#a13").slideUp();
	$("#a14").slideDown();
	$("#a15").slideDown();
	$("#a17").slideDown();
   
});

$(".a8_2").click(function() {
		
	$("#a12").slideUp();
	$("#a13").slideDown();
	$("#a14").slideUp();
	$("#a15").slideUp();
	$("#a17").slideUp();
   
});

});

行動規範の内容に同意します

回答1件

/*
 * <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) { continue; }
    $(target).slideUp();
  }
  $(name).slideDown();
}

Ref: javascript - jQuery: click function bind in for-loop with closure fix - Stack Overflow

投稿2014/09/29 19:15