Ankündigung

Einklappen
Keine Ankündigung bisher.

Code kürzen

Einklappen

Neue Werbung 2019

Einklappen
Dieses Thema ist geschlossen.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Grischa
    hat ein Thema erstellt Code kürzen.

    Code kürzen

    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

    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>');
    });
    });
    index.php

    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>

  • nikosch
    antwortet
    Der Inhalt der Tabellen sind Vokabeln auf Deutsch und der jeweiligen Fremdsprache.
    Ok, habs mittlerweile erkannt. Ich dachte Du meinst Variablen

    Crossposting

    http://stackoverflow.com/questions/2...age-in-a-table

    [MOD: Close]

    Einen Kommentar schreiben:


  • Arne Drews
    antwortet
    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).
    Naja, wenn es sich doch um eine index.php handelt, darf man ja auch PHP nutzen. Bisher sehe ich da nur HTML.

    Code:
    PHP + Schleifenablauf = Ein sich wiederholender Codeblock für alle <tr>´s

    Einen Kommentar schreiben:


  • Grischa
    antwortet
    Zitat von nikosch Beitrag anzeigen
    Vo-kabeln?
    Der Inhalt der Tabellen sind Vokabeln auf Deutsch und der jeweiligen Fremdsprache.

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Vo-kabeln?

    Einen Kommentar schreiben:


  • Dormilich
    antwortet
    wie kann ich den Code von der index.php verkürzen und zwar damit die Vokabeln nicht 2mal geschrieben werden müssen
    ich empfehle [MAN]sprintf[/MAN].

    Code:
    var text = $(this).attr('data-text');
    entweder
    Code:
    var text = this.dataset.text;
    oder
    Code:
    var text = $(this).data('text');
    alles andere ist inkonsequent (bis unzuverlässig).

    Einen Kommentar schreiben:


  • Grischa
    antwortet
    Ich bin mir nicht ganz sicher, ob ich in diesen Unterforum mit der Frage richtig bin.

    Einen Kommentar schreiben:

Lädt...
X