將數組發送到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。