jquery - 根据 div 是否具有某个类，动画到某个高度

Question

我有一个 div，我想根据 click 元素将动画设置为 3 个不同的高度。我本来想用类来做，所以如果点击了一个名为 d_foxboro 的 div 并且它有一个 height_one 类，则 location_slider 动画到第一个高度，如果点击另一个 div，d_main 并且它有一个height_two 的类，然后 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 );

});