Question

我有一个div，我想根据click元素设置3种不同的高度。我本来想用类做的，所以如果点击了一个元素，就会点击一个名为d_foxboro的div，它有一个height_one类，如果点击了另一个div，它就会被安排到第一个高度，d_main并且它有一个class_ height，然后将location_slider设置为第二个高度，依此类推。

$( "#d_Foxboro" ).click(function(){
$( "#location_slider" ).animate({
"height": 500
}, 450 );
});

Answer 1

$( "#d_Foxboro" ).click(function(){
    var height = 0;
    if($(this).hasClass('class1')){ 
       height = 400; 
   } else if($(this).hasClass('class2')){ 
       height = 500; 
   } else if($(this).hasClass('class3')){ 
       height = 600; 
   }

   $( "#location_slider" ).animate({
       "height": height
   }, 450 );

});

基本上，使用hasClass查看元素所在的类，然后根据类设置包含高度的变量

Answer 2

我个人喜欢使用.on()方法来绑定事件，因为如果元素动态添加到DOM，它可以让我轻松更改它。

$( "#d_Foxboro" ).on("click", function(){
    var height = 0;
    if ($(this).hasClass() == "someClass"){
        height = 100;
    }
    else
    {
        height = 200;           
     }
    $( "#location_slider" ).animate({
         "height": height
       }, 450 );
});

Answer 3

单击时检查班级，然后根据

设置高度变量

$( "#d_Foxboro" ).click(function(){
  // Default height
  var h = 0; // Set to a default number
  // Class of clicked item
  var h_class = $(this).attr('class');

  // Check class and set height based of which class
  if(h_class == "something") {
    h = 500;
  } else if(h_class == "something else") {
    h = 400
  }

  $( "#location_slider" ).animate({
    "height": h
  }, 450 );

});

根据div是否具有某个类来动画到某个高度

3 个答案: