其他if：如果hasClass然後做點什麼

-1

對於JavaScript和jQuery來說還是很新穎，但考慮下面的代碼，你會如何簡化它？其他if：如果hasClass然後做點什麼

我的意思是，第一條件2執行相同的功能，除了特定的整數。最後別的不考慮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); 
};     
})

來源

2013-06-18 Hugues Brunelle

HTTP：/ /codereview.stackexchange.com/會更適合這個問題。 –

不知道這個@Matthew。抱歉。 –

把它包起來的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-18 16:19:18 Gabe

+1用於用函數進行合理的重構。 –

是的，我想用我的答案中的函數來竊取重構的想法，但是我會+1而不是竊取你的想法。 ;） –

傑出！我調整了你的解決方案，因爲我們在這個項目上有一個jQuery衝突，但它完美的工作，它可以幫助我理解最佳實踐。非常感謝你：） –

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-18 16:18:24

這是最簡單的變化，防止大量的重複。（記住要保持你的代碼幹 - 不要重複自己）

// 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-18 16:19:10

這應該做的伎倆，我認爲：

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-18 16:20:38 Doug

其他if：如果hasClass然後做點什麼

回答

相關問題