更改背景使用JSON對象

我想換一個divbox的背景時播放音樂，而路徑是JSON對象，但它始終把背景與此代碼中的最後一項：更改背景使用JSON對象

for (var i in data.Music){ 
     var id= "a" + i; 
     var bg="url(" + data.Music[i].Background + ")"; 
     document.getElementById(id).addEventListener('play', function(){ 
     $("#Background").fadeOut("slow", function() { 
     $('#Background').css("background-image", bg); 
     }); 
     $("#Background").fadeIn("slow"); 

    }); 


    }

的Json

"Music":[{"Title":"Bring mich nach Haus", 
         "Source":"\"Music/08. Bring mich nach Haus.mp3\"", 
         "Background":"\"Backgrounds/Faun.jpg\"" 
        }, 
        { 
         "Title":"100 Ways to Hate", 
         "Source":"\"Music/11. 100 Ways to Hate.mp3\"", 
         "Background":"\"Backgrounds/FFDP.jpg\"" 
        }

添加音頻標籤：

for (var i in data.Music) 
    { 
     console.log(i); 
     outputmusic += data.Music[i].Title + "<br />" + "<audio controls id=\"a"+i+"\"><source src=" + data.Music[i].Source + " type=\"audio/mpeg\">" + "</audio> <br />" 
    } 

document.getElementById("Music").innerHTML=outputmusic; 

console.log(outputmusic);

來源

2014-11-23 JD.

以及你想要什麼？一個隨機圖像？一個特定的？只要你循環遍歷數組中的所有圖像，最後一個圖像就會保留。 – 2014-11-23 12:42:52

我想獲得一個特定的背景，當一個特定的標題被播放時...添加JSON代碼 – 2014-11-23 12:45:47

好的，但你正在循環通過他們'for（var i in data.Music）'循環。你不想要一個特定的嗎？ – deitch 2014-11-23 12:46:37

你有一個封閉的問題。你的函數最終綁定到bg的最後一個值。

此代碼應工作：

for (var i in data.Music) { 
    var id = "a" + i; 
    (function() { 
     var bg="url(" + data.Music[i].Background + ")"; 
     document.getElementById(id).addEventListener('play', function() { 
      $("#Background").fadeOut("slow", function() {     
       $('#Background').css("background-image", bg); 
      }); 
      $("#Background").fadeIn("slow"); 
     }); 
    })(); 
}

來源

2014-11-23 12:59:10

修復關閉問題，但需要使用遊戲，而不是點擊 – 2014-11-23 13:03:56

修復它 - 我測試它，所以我需要使用'點擊'。希望有所幫助。 – 2014-11-23 13:04:50

我不知道，但我想你可能甲肝e closures問題 - 因爲您正在遍歷data.Music中的元素，保存到變量'bg'中的最後一個背景是data.Music中的最終背景數據。然而，同樣的'bg'由於沒有更好的術語，因爲閉包而'保存'，並且是在調用.fadeOut（）回調函數時作爲背景圖像附加的。

可能的解決辦法：

for (var i in data.Music){ 
     var id= "a" + i; 
     var bg="url(" + data.Music[i].Background + ")"; 
     document.getElementById(id).addEventListener('play', function(){ 
     var currBg = bg; 
     $("#Background").fadeOut("slow", function() { 
     $('#Background').css("background-image", currBg); 
     }); 
     $("#Background").fadeIn("slow"); 

    }); 
    }

來源

2014-11-23 12:48:53 Udi

仍然需要最後一個 – 2014-11-23 12:53:23

更改背景使用JSON對象

回答

相關問題