Question

JavaScript和jQuery仍然很新，但考虑到下面的代码，你会如何简化它？

我的意思是，除了特定的整数外，前两个条件执行相同的函数。最后一个不考虑var sliderHeight

Thanx为你提供帮助！

// Set the variable containing the slider height
var sliderHeight = jQuery(".royalSlider").height();
var contentHeight;
var contentTopPosition;

jQuery(".slide-content").each(function(){

if (jQuery(this).parent(".rsContent").hasClass("allCaps")){

    sliderHeight = sliderHeight + 20;

    contentHeight = jQuery(this).height();
    contentTopPosition = (sliderHeight/2)+(contentHeight/2);

    jQuery(this).css("top",-contentTopPosition);

} else if (jQuery(this).parent(".rsContent").hasClass("bigTitleAlignRight")){

    sliderHeight = sliderHeight - 6;

    contentHeight = jQuery(this).height();
    contentTopPosition = (sliderHeight/2)+(contentHeight/2);

    jQuery(this).css("top",-contentTopPosition);

} else {

    contentHeight = jQuery(this).height();
    contentTopPosition = (sliderHeight/2)+(contentHeight/2);

    jQuery(this).css("top",-contentTopPosition);
};                  
})

Answer 1

将其整理到function并使用$进行jQuery

var sliderHeight = $(".royalSlider").height();

$(".slide-content").each(function(){

    var $this = $(this);
    if ($this.parent(".rsContent").hasClass("allCaps")){
        updateContent($this, sliderHeight + 20);
    } else if ($this.parent(".rsContent").hasClass("bigTitleAlignRight")){
        updateContent($this, sliderHeight - 6);
    } else {
        updateContent($this);
    }    
});

然后是function：

function updateContent($this, value){

    if(value != null)
       sliderHeight = value;

    var contentHeight = $this.height();
    var contentTopPosition = (sliderHeight/2)+(contentHeight/2);

    $this.css("top", -contentTopPosition);
}

Answer 2

这是最简单的改变，防止大量重复。（记住要保持代码干净 - 不要重复自己。）

// Set the variable containing the slider height
var sliderHeight = jQuery(".royalSlider").height();
var contentHeight;
var contentTopPosition;

jQuery(".slide-content").each(function(){

if (jQuery(this).parent(".rsContent").hasClass("allCaps")){

    sliderHeight = sliderHeight + 20;

} else if (jQuery(this).parent(".rsContent").hasClass("bigTitleAlignRight")){

    sliderHeight = sliderHeight - 6;

}

contentHeight = jQuery(this).height();
contentTopPosition = (sliderHeight/2)+(contentHeight/2);

jQuery(this).css("top",-contentTopPosition);
});

更进一步，将jQuery(this).parent(".rsContent")语句替换为您设置一次的变量。

Answer 3

var sliderHeight = jQuery(".royalSlider").height();

jQuery(".slide-content").each(function(){
    var contentHeight = jQuery(this).height();
    if (jQuery(this).parent(".rsContent").hasClass("allCaps")){
        sliderHeight = sliderHeight + 20;
    } else if (jQuery(this).parent(".rsContent").hasClass("bigTitleAlignRight")){
        sliderHeight = sliderHeight - 6;
    }
    jQuery(this).css("top", -(sliderHeight + contentHeight) / 2);
});

我删除了一些重复的代码。除此之外，我的变化不大。

Answer 4

这应该是我认为的伎俩：

var $parent = jQuery(this).parent();

jQuery(".slide-content").each(function(){
  var sliderHeight = jQuery(".royalSlider").height(),
      contentHeight = jQuery(this).height(),
      contentTopPosition;

  if ($parent.hasClass("allCaps")){
      sliderHeight = sliderHeight + 20;
  } else if ($parent.hasClass("bigTitleAlignRight")){
      sliderHeight = sliderHeight - 6;
  }

  contentTopPosition = (sliderHeight/2)+(contentHeight/2);
  jQuery(this).css("top",-contentTopPosition);
})

Multi else if if：if hasClass然后做一些事情

4 个答案: