-1

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

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

感谢您的帮助！

// 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);
};                  
})
4

4 回答 4

2

把它包起来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);
}
于 2013-06-18T16:19:18.683 回答
1

这是最简单的更改，可防止大量重复。（记住保持你的代码干燥——不要重复你自己。）

// 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")语句替换为您设置一次的变量。

于 2013-06-18T16:19:10.713 回答
0

我认为这应该可以解决问题：

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);
})
于 2013-06-18T16:20:38.980 回答
0 
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);
});

我删除了一些重复的代码。除此之外，我并没有太大的改变。

于 2013-06-18T16:18:24.517 回答