Question

我希望在路径位于json对象中时播放音乐时更改divbox的背景，但它始终使用此代码获取背景的最后一个条目：

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);

Answer 1

我不确定，但我认为您可能遇到closures问题 - 因为您正在迭代data.Music中的元素，最后一个背景保存到变量＆＃39 ; BG＆＃39;是data.Music中的最终背景数据。然而，同样的＆＃39;＆＃39;是因为缺乏一个更好的术语，“拯救了”。感谢封闭，并且当调用.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");

    }); 
  }

Answer 2

你有一个关闭问题。您的函数最终绑定到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");
        });
    })();
}

使用JSON对象更改背景

2 个答案: