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

  • 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>


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

    Kommentar


    • #3
      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).

      Kommentar


      • #4
        Vo-kabeln?
        --

        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


        --

        Kommentar


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

          Kommentar


          • #6
            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
            Competence-Center -> Enjoy the Informatrix
            PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

            Kommentar


            • #7
              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]
              --

              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


              --

              Kommentar

              Lädt...
              X