如果选择器链接？

Question

好吧，如果选定的ID具有选定的类，我会尝试将某些内容设置为不同的高度。 我有以下代码。

 function myfunction() {


   if ($('#homebutton').hasClass("active"));
   {
    $('#content').animate({height: "240px",opacity: 1}, 100 , hideLoader());
   }

   if ($('#showbutton').hasClass("active"));
   {
   $('#content').animate({height: "79px",opacity: 1}, 200 , hideLoader());
   }

   if ($('#aboutbutton').hasClass("active"));
   {
   $('#content').animate({height: "527px",opacity: 1}, 300 , hideLoader());}

   if ($('#contactbutton').hasClass("active"));
   {
   $('#content').animate({height: "1040px",opacity: 1}, 400 , hideLoader());
   }
}

无论我点击什么，它都会将动画链接在一起，无论我点击它最终都是1040px高，我做错了什么？

尝试将其更改为

{if ($('#homebutton').hasClass("active"));
$('#content').animate({height: "240px",opacity: 1}, 100 , hideLoader());
}

绝对没有影响

Answer 1

您已将if语句与下一行的代码分开。条件为真时执行的唯一事情是空语句。

改变这个：

if ($('#homebutton').hasClass("active"));

成：

if ($('#homebutton').hasClass("active"))

和其他三个相同。

Answer 2

你可以利用Javascript的优秀语言来清理它：

$.each({
  '#homebutton': { height: '240px', speed: 100 },
  '#showbutton': { height: '79px', speed: 200 },
  '#aboutbutton': { height: '527px', speed: 300 },
  '#contactbutton': { height: '1040px', speed: 400 }
}, function(selector, controls) {
  if ($(selector).hasClass('active'))
    $('#content').animate({height: controls.height, opacity: 1}, controls.speed, hideLoader());
});