将数组发送到JQuery中的对象构造函数

Question

我试图将复选框创建的数组的值发送给“buzz”声音对象的构造函数。代码遵循。

<input type="checkbox" name="loops" value="drums01" id="drums01" class="Checkbox" > Drums #1</li> 
<li><input type="checkbox" name="loops" value="drums02" id="drums02" class="Checkbox"> Drums #2</li> 
<li><input type="checkbox" name="loops" value="guitar01" id="guitar01" class="Checkbox"> Guitar #1</li> 
//CHECKBOXES 

<button class="button button_type_sound" id="b01">Play<q class="key" id="key_q">Q</q></button> 
//BUTTON 

var arr = new Array(); 

var drums01 = new buzz.sound("drumloop01", { 
    formats: [ "wav" ], 
    preload: true, 
    autoplay: false, 
    loop: true 
}); 

var drums02 = new buzz.sound("drumloop02", { 
    formats: [ "wav" ], 
    preload: true, 
    autoplay: false, 
    loop: true 
}); 

var guitar01 = new buzz.sound("guitarloop01", { 
    formats: [ "wav" ], 
    preload: true, 
    autoplay: false, 
    loop: true 
}); 


//ATTEMPT TO CREATE SOUND OBJECT FROM ARRAY AND PLAY IT 
$("#b01").click(function(event){ 
    event.preventDefault(); 

    var arr = new Array($("input:checkbox:checked").map(function(){ 
     return this.value; 
    }).toArray()); 

    console.log(arr.toString()); 

    console.log("Try Playing Sound"); 
    console.log(arr.toString()); 

    var myGroup = new buzz.group(arr.toString()); 
myGroup.play(); 
}); 

控制台使我有以下错误：

drums01,drums02 index.html:68 
Try Playing Sound index.html:71 
drums01,drums02 index.html:72 
Uncaught TypeError: Cannot call method 'apply' of undefined 

Answer 1

这是一个工作小提琴创建修复您发布在您的问题的代码。 http://jsfiddle.net/fmKeV/3/

说明

正如你可以看到，在“初始化节”创建对象字面buzz.sound的实例。 然后，在按钮的事件处理程序中，我将每个选定的复选框映射到相应的声音（我更改了输入元素的值，使其与buzzSounds对象中的键相同）。 new Array in new Array($() ... .toArray())在您的代码中是不需要的。调用map函数的结果的toArray()方法已足够，否则结果将是嵌套数组，这不是buzz.group函数所需的。

代码

标记

<ul class="sounds"> 
    <li> 
     <input type="checkbox" name="loops" value="drumloop01" id="drums01" class="Checkbox" />Drums #1</li> 
    <li> 
     <input type="checkbox" name="loops" value="drumloop02" id="drums02" class="Checkbox" />Drums #2</li> 
    <li> 
     <input type="checkbox" name="loops" value="guitarloop01" id="guitar01" class="Checkbox" />Guitar #1</li> 
</ul> 
<button class="button button_type_sound" id="b01">Play 
    <q class="key" id="key_q">Q</q> 
</button> 

的Javascript

$(document).ready(function() { 
    // init sounds 
    var buzzSounds = {}; 

    buzzSounds.drumloop01 = new buzz.sound("drumloop01", { 
     formats: ["wav"], 
     preload: true, 
     autoplay: false, 
     loop: true 
    }); 

    buzzSounds.drumloop02 = new buzz.sound("drumloop02", { 
     formats: ["wav"], 
     preload: true, 
     autoplay: false, 
     loop: true 
    }); 

    buzzSounds.guitarloop01 = new buzz.sound("guitarloop01", { 
     formats: ["wav"], 
     preload: true, 
     autoplay: false, 
     loop: true 
    }); 

    //CLICK EVENT HANDLER 
    $("#b01").on('click', function(e) { 
     var sounds, group; 

     //0) Prevent default 
     e.preventDefault(); 

     //1) map every selected element to the sound defined in the "buzzSounds" object 
     toPlay = $(".sounds input:checkbox:checked").map(function() { 
      return buzzSounds[this.value]; 
     }).toArray(); 

     //2) create a group from the collected buzz.sound instances 
     myGroup = new buzz.group(toPlay); 

     //3) play the group 
     console.log("Try Playing Sounds", toPlay, myGroup); 
     try { 
      myGroup.play(); 
     } catch (e) { 
      console.log('uh-oh', e); 
      //in this example the sound files have not been loaded, so an error could be raised 
     } 

    }); 
}); 

Answer 2

尝试是这样的：

$(document).ready(function() { 

    var drums01 = new buzz.sound("drumloop01", { 
     formats: ["wav"], 
     preload: true, 
     autoplay: false, 
     loop: true 
    }); 

    var drums02 = new buzz.sound("drumloop02", { 
     formats: ["wav"], 
     preload: true, 
     autoplay: false, 
     loop: true 
    }); 

    var guitar01 = new buzz.sound("guitarloop01", { 
     formats: ["wav"], 
     preload: true, 
     autoplay: false, 
     loop: true 
    }); 

    //ATTEMPT TO CREATE SOUND OBJECT FROM ARRAY AND PLAY IT 
    $("#b01").click(function (event) { 
     event.preventDefault(); 

     var arr = new Array(); 

     $('input[type="checkbox"]').each(function() { 
      arr.push($(this).val()); 
     }); 

     console.log(arr.toString()); 


     console.log("Try Playing Sound"); 
     console.log(arr.toString()); 

     var myGroup = new buzz.group(arr.toString()); 
     myGroup.play(); 

    }); 
}); 

让我知道它是如何工作的。

fiddle

Answer 3

据我所知，创造buzz.group我们应该传递数组没有字符串：

Sounds can be added to a group by passing an array to the constructor.

但你传递字符串代替，所以它应该是这样的：

var myGroup = new buzz.group([ 
    mySound1, 
    mySound2, 
    mySound3 
]); 

我改变了你这样的提琴例如：

$(document).ready(function() { 
    var drums = {}; 
    drums.drums01 = new buzz.sound("drumloop01", { 
     formats: ["wav"], 
     preload: true, 
     autoplay: false, 
     loop: true 
    }); 

    drums.drums02 = new buzz.sound("drumloop02", { 
     formats: ["wav"], 
     preload: true, 
     autoplay: false, 
     loop: true 
    }); 

    drums.guitar01 = new buzz.sound("guitarloop01", { 
     formats: ["wav"], 
     preload: true, 
     autoplay: false, 
     loop: true 
    }); 

    $("#b01").click(function (event) { 
     event.preventDefault(); 

     var arr = new Array(); 

     $('input[type="checkbox"]:checked').each(function() { 
      arr.push(drums[$(this).val()]); 
     }); 

     var myGroup = new buzz.group(arr.toString()); 
     myGroup.play(); 
    }); 
}); 

检查新的DEMO了。

问题在你的代码中，你将变量名作为字符串数组传递，而你应该传递实际的对象。要解决您的问题，您应该使用上下文对象（如var drums = {}）中的可访问对象来访问它们，您可以在匿名函数中使用它。

for mor information检查link out。