Jquery 使用JSON对象更改背景

我想在播放音乐时更改divbox的背景，而路径位于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

添加音频标签：

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

---

我不确定，但我认为您可能有问题-因为您正在迭代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");

    }); 
  }

---

你有个了结的问题。您的函数最终绑定到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代码OK，但是您正在data.Music循环中的for var i中循环使用它们。你不想要一个特定的吗？是的，我想给每个音频标签添加一个eventlistener。。。添加了AudioTags的代码直到最后一个解决了关闭问题，但需要使用play而不是clickFixed-我正在测试它，所以我需要使用“click”。希望这有帮助。

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");
        });
    })();
}