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

Question

我正在尝试将复选框创建的数组的值发送到“嗡嗡声”声音对象的构造函数。代码如下。

<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($() ... .toArray()) 中的new Array。在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，我们应该传递数组而不是字符串：

可以通过将数组传递给构造函数来将声音添加到组中。

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

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 = {}）使它们可访问，您可以在匿名函数中使用它。

更多信息请查看link。