-1

JavaScript と jQuery にはまだかなり慣れていませんが、以下のコードを考えると、どのように簡略化できますか?

つまり、最初の 2 つの条件は、特定の整数を除いて同じ機能を実行します。最後の他のものは考慮しません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

これが最も簡単な変更であり、大量の繰り返しを防ぎます。(コードを DRY に保つことを忘れないでください。同じことを繰り返さないでください。)

// 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 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 に答える
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 に答える