將一系列的If語句合並為一個代碼

Question

現在，我有一系列的if語句，每個語句測試窗口是否滾動到某個點以上，如果是，則更改背景。 由於每個if語句都非常相似，所以我想知道是否可以將所有if語句組合為一個。 由於我有一百多張圖像，因此我目前正在使用這種方法，因此我必須為每個圖像制作一個if語句。

我的代碼示例如下。 您會注意到的唯一更改是scrolltop（）/ 2> _和MAH00046％2028.jpg。

    if ($(this).scrollTop()/2 > 2800) {
    $('body').css({
        backgroundImage: 'url(    "images/chapter_background_images/MAH00046%20028.jpg")'
    });
}

if ($(this).scrollTop()/2 > 2900) {
    $('body').css({
        backgroundImage: 'url(    "images/chapter_background_images/MAH00046%20029.jpg")'
    });
}

Answer 1

這將是最好的：

var imageBase = 'images/chapter_background_images/MAH00046%200';            
var scrollTopHalf = $(this).scrollTop() / 2;
if(scrollTopHalf < 2900 || scrollTopHalf > 3900)
{           
    var image = imageBase + (Math.floor(scrollTopHalf / 100)).toString() + '.jpg';

    $('body').css({
        backgroundImage: 'url("' + image + '")'
    });
}

我的另一種方法效率很低。

Answer 2

不要使用if語句，而是使用計算結果來創建到圖片的鏈接，因為圖片的名稱是連續數字。

var inc = 100;
var imgUrl = 'images/chapter_background_images/MAH00046%';
var url = imgUrl.concat((Math.floor(scrollTop()/2)/inc)*inc).toString());

我在這里使用100，但是您可以更改圖片之間每個增量的值。

javascript floor方法

javascript串聯方法

JavaScript tostring方法

Answer 3

使用for循環進行輕微變化，並假設以2800為底數增加100（並將每個jpg文件名的編號成功增加1）

function myFunction() {
var counter = //number of if statements
for (i = 28; i <= i + counter; i++) {
    if ($(this).scrollTop()/2 > 100*i) {
        $('body').css({backgroundImage: 'url("images/chapter_background_images/MAH00046%200"' + i + '".jpg")'});
    }
}