AppendTo variabele class in selector

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Open Source Developer Engineer Ontwikkelaar

Functieomschrijving Open Source Developer Engineer Ontwikkelaar Doorontwikkelen van de software; Het naadloos integreren van de verschillende componenten Het geven van advies over het inrichten; Het kiezen van methoden en technieken voor het realiseren (waarbij je gebruik maakt van Opensource); Het meedenken met de ontwikkelingen in de markt. Functie-eisen HBO werk- en denkniveau; Ervaring als Open Source Ontwikkelaar; Ruime ervaring met Open Source software (bijv. Zimbra, Alfresco, Nextcloud, Kopano etc, etc); Je hebt kennis van producten als Kubernetes, Openvswitch, Ceph, ZFS, Proxmox, Terraform, Puppet en Ansible; Nieuwsgierig en pro-actief /Out-of-the-box denken / Analytisch en conceptueel denken / Gepassioneerd, gedreven en bedreven

Bekijk vacature »

OutSystems Developer / International environment /

Functieomschrijving Would you like to work in a professional and international working environment and do you have experience in the field of OutSystems? Apply now! Translate wishes and requirements into technical designs; Design and develop new software feautures and technologies, mainly in the field of logistics/planning; Maintainance, administration and improvement of the OutSystems platform; Solving issues and bugs within the software; Define and run test plans; Documentation of development and bugfixes; Constant improvement of the OutSystems platform and follow-up of newest innovations within this field. Functie-eisen Knowledge of and experience with OutSystems is required. Experience with other low-code platforms is

Bekijk vacature »

Senior OutSystems Developer / International enviro

Functieomschrijving Would you like to work in a professional and international working environment and do you have extensive experience in the field of OutSystems? Apply now! Translate wishes and requirements into technical designs; Design and develop new software feautures and technologies, mainly in the field of logistics/planning; Maintainance, administration and improvement of the OutSystems platform; Solving issues and bugs within the software; Define and run test plans; Documentation of development and bugfixes; Constant improvement of the OutSystems platform and follow-up of newest innovations within this field. Functie-eisen Knowledge of and multiple of years experience with OutSystems is required. Experience with

Bekijk vacature »

Nien E

Nien E

13/12/2019 14:48:14
Quote Anchor link
Na heel veel gepuzzel heb ik het gevoel dat ik dicht bij de oplossing ben, maar ik kom er niet helemaal zelf uit.
Ik probeer meerdere audioplayers op 1 pagina te laden(origineel https://codepen.io/jhereg00/pen/WjQPdW). Ik heb het handmatig getest, en dit werkt. Wanneer ik het dynamisch wil maken loop ik tegen het volgende aan:

Via php heb ik een array, die ik heb omgezet naar een variabele voor JavaScript. De variabele bevat verschillende url's naar audiobestanden.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<script type=text/javascript>
    var audiobestand = <?php echo json_encode( $data ) ?>;
</script>


Door middel van een loop probeer ik de url's in JavaScript te laden, dat volgens mij nu goed gaat. Echter de audioplayer wordt in de HTML geladen d.m.v.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
appendTo(playerContainer1)
. Gezien ik meerdere audiobestanden heb, wil ik graag dat de class 'playerContainer1' oploopt naar 'playerContainer9'. In het volgende stukje code zie je dat ik een counter gemaakt heb. Deze wil ik graag aanroepen op de plek van de 1 in 'playerContainer1'. ik heb bijvoorbeeld geprobeerd om er
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
cap.appendTo(playerContainer.increment());
van te maken maar dat kan niet. Heeft er iemand een idee of dit uberhaupt mogelijk is, en zo niet, hoe zou ik dit het best kunnen aanpakken?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
        <script type="text/javascript">
        var counter = 0;
        for(i in audiobestand){
            var increment = function(){
                return counter=counter+1;
            }
            var cap = new CircleAudioPlayer({
                audio: audiobestand[i],
                  size: 120,
                 borderWidth: 8
            });
            cap.appendTo(playerContainer1);
            }
        </script>


Hopelijk heb ik het zo een beetje duidelijk uitgelegd.

Groet,
Nien
Gewijzigd op 13/12/2019 15:09:13 door Nien E
 
PHP hulp

PHP hulp

21/09/2020 11:56:03
 
Frank Nietbelangrijk

Frank Nietbelangrijk

13/12/2019 18:13:52
Quote Anchor link
Als je meerdere CircleAudioPlayer objecten maakt dan kun je meerdere players aan de container toevoegen.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// now init one as an example
var cap = new CircleAudioPlayer({
    audio: 'http://www.html5tutorial.info/media/vincent.mp3',
  size: 120,
  borderWidth: 8
});

cap.appendTo(playerContainer);

// and a second
var cap = new CircleAudioPlayer({
    audio: 'http://www.html5tutorial.info/media/vincent.mp3',
  size: 120,
  borderWidth: 8
});

cap.appendTo(playerContainer);


Resultaat:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div id="playerContainer">
    <canvas class="circle-audio-player is-paused" width="120" height="120"></canvas>
    <canvas class="circle-audio-player is-paused" width="120" height="120"></canvas>
</div>


Waarom zou je met playerContainer1 tm playerContainer9 willen werken? Dit dient geen enkel doel lijkt me?
Ik kan me wel voorstellen dat je elke player nog in een div wilt plaatsen als je er bijvoorbeeld nog een stukje tekst bij wilt plaatsen. Je zou dan het beste een eigen functie kunnen schrijven en deze dan voor iedere player aanroepen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function appendPlayer(cap, text) {
  var div = document.createElement('div'); // maak een nieuwe div
  var title = document.createElement('h5'); // maak een nieuwe header
  
  title.innerHTML = text; // voeg een tekst toe aan de header
  div.appendChild(title); // voeg de header toe aan onze nieuwe div

  div.classList.add("mystyle"); // geef de div een class attribute voor de css
  cap.appendTo(div); // voeg vervolgens de player toe aan onze nieuwe div
  
  playerContainer.appendChild(div); // voeg de niewe div toe aan de container
}

// now init one as an example
var cap = new CircleAudioPlayer({
    audio: 'http://www.html5tutorial.info/media/vincent.mp3',
  size: 120,
  borderWidth: 8
});

appendPlayer(cap, "Eerste player");

// and a second
var cap = new CircleAudioPlayer({
    audio: 'http://www.html5tutorial.info/media/vincent.mp3',
  size: 120,
  borderWidth: 8
});


appendPlayer(cap, "Tweede player");


Resultaat:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<div id="playerContainer">
    <div class="mystyle">
        <h5>Eerste player</h5>
        <canvas class="circle-audio-player is-playing" width="120" height="120"></canvas>
    </div>
    <div class="mystyle">
        <h5>Tweede player</h5>
        <canvas class="circle-audio-player is-paused" width="120" height="120"></canvas>
    </div>
</div>
 
Nien E

Nien E

13/12/2019 20:59:36
Quote Anchor link
Wow, bedankt voor je uitgebreide antwoord Frank! Ik ga het dit weekend gelijk uitproberen. De reden dat ik het op deze manier probeerde is omdat de urls via een array worden opgehaald en inderdaad met begeleidende tekst. Hopelijk gaat het me lukken. Ik laat het nog even weten!
 
Frank Nietbelangrijk

Frank Nietbelangrijk

14/12/2019 14:06:26
Quote Anchor link
Geen probleem. Je zult even door die array moeten wandelen en in die lus dus steeds een nieuwe player object moeten aanmaken en dan die functie appendPlayer moeten aanroepen.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.