Hallo,
wie kann ich den Code von der index.php verkürzen und zwar damit die Vokabeln nicht 2mal geschrieben werden müssen (im td und im data-text). Am besten wäre es die Play-Grafik in eine externe css-Datei zu packen.
Durch das Script kann man übrigens durch das Drücken auf den Play-Icon das jeweilige Wort in der richtigen Sprache sich anhören lassen.
Vielen Dank für eure Hilfe!
trigger_play.js
index.php
wie kann ich den Code von der index.php verkürzen und zwar damit die Vokabeln nicht 2mal geschrieben werden müssen (im td und im data-text). Am besten wäre es die Play-Grafik in eine externe css-Datei zu packen.
Durch das Script kann man übrigens durch das Drücken auf den Play-Icon das jeweilige Wort in der richtigen Sprache sich anhören lassen.
Vielen Dank für eure Hilfe!
trigger_play.js
Code:
$(document).ready(function(){ $('.trigger_play').on('click', function(){ var text = $(this).attr('data-text'); var lang = $(this).attr('data-lang'); console.log(text); $('#hidden_player').html('<audio controls="" autoplay="" name="media" hidden="true" autostart><source src="/data/languages/multi_sound.php?text='+text+'&tl='+lang+'" type="audio/mpeg"></audio>'); }); });
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <script src="/data/js/trigger_play.js" type="text/javascript"></script> <table class="table-vocabulary"> <thead> <tr> <th><img src="/bilder/symbole/play.png" data-text="graduate profession" data-lang="en" class="trigger_play"> graduate profession</th> <th><img src="/bilder/symbole/play.png" data-text="der akademische Beruf" data-lang="de" class="trigger_play"> der akademische Beruf</th> </tr> </thead> <tbody> <tr> <td><img src="/bilder/symbole/play.png" data-text="lawyer" data-lang="en" class="trigger_play"> lawyer</td> <td><img src="/bilder/symbole/play.png" data-text="der Anwalt" data-lang="de" class="trigger_play"> der Anwalt</td> </tr> <tr> <td><img src="/bilder/symbole/play.png" data-text="lawyer" data-lang="en" class="trigger_play"> lawyer</td> <td><img src="/bilder/symbole/play.png" data-text="die Anwältin" data-lang="de" class="trigger_play"> die Anwältin</td> </tr> <tr> <td><img src="/bilder/symbole/play.png" data-text="pharmacist" data-lang="en" class="trigger_play"> pharmacist</td> <td><img src="/bilder/symbole/play.png" data-text="der Apotheker" data-lang="de" class="trigger_play"> der Apotheker</td> </tr> <tr> <td><img src="/bilder/symbole/play.png" data-text="pharmacist" data-lang="en" class="trigger_play"> pharmacist</td> <td><img src="/bilder/symbole/play.png" data-text="die Apothekerin" data-lang="de" class="trigger_play"> die Apothekerin</td> </tr> <tr> <td><img src="/bilder/symbole/play.png" data-text="archeologist" data-lang="en" class="trigger_play"> archeologist</td> <td><img src="/bilder/symbole/play.png" data-text="der Archäologe" data-lang="de" class="trigger_play"> der Archäologe</td> </tr> <tr> <td><img src="/bilder/symbole/play.png" data-text="archeologist" data-lang="en" class="trigger_play"> archeologist</td> <td><img src="/bilder/symbole/play.png" data-text="die Archäologin" data-lang="de" class="trigger_play"> die Archäologin</td> </tr> <tr> <td><img src="/bilder/symbole/play.png" data-text="architect" data-lang="en" class="trigger_play"> architect</td> <td><img src="/bilder/symbole/play.png" data-text="der Architekt" data-lang="de" class="trigger_play">der Architekt</td> </tr> <tr> <td><img src="/bilder/symbole/play.png" data-text="architect" data-lang="en" class="trigger_play"> architect</td> <td><img src="/bilder/symbole/play.png" data-text="die Architektin" data-lang="de" class="trigger_play"> die Architektin</td> </tr> <tr> <td><img src="/bilder/symbole/play.png" data-text="astronomer" data-lang="en" class="trigger_play"> astronomer</td> <td><img src="/bilder/symbole/play.png" data-text="der Astronom" data-lang="de" class="trigger_play">der Astronom</td> </tr> </table> <div id="hidden_player"></div>
Kommentar