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

Posted 2023-02-25

【中文标题】将数组发送到 JQuery 中的对象构造函数

【英文标题】：Send an Array to an object constructor in JQuery

【发布时间】：2014-02-10 20:54:29

【问题描述】：

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

<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 

【参考方案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
        

    );
);

【参考方案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

【讨论】：

干净多了，谢谢！但是我仍然收到错误消息。第 72 行的“Uncaught SyntaxError: Unexpected end of input”（这是我的 /script 结束的地方）

【参考方案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。

【讨论】：

实际上，我大部分时间都在尝试按照您的建议进行这项工作，但不幸的是我得到了：Uncaught TypeError: Cannot call method 'apply' of undefined - 这是数组的问题吗值不通过？

@user3294635：再次检查我的答案并完成它。

我 90% 在那里！现在改变的只是每个值都传递给数组，而不仅仅是复选框。再次感谢您的帮助，您的帮助很大！

没关系，我把最后几行改成了 "$("input:checkbox:checked").each(function () arr.push(loop[$(this).val()]) ;" 效果很好，谢谢！

@user3294635：你应该使用input[type="checkbox"]:checked 而不是input[type="checkbox"]。又改了答案。