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?
        [COLOR="#F5F5FF"]--[/COLOR]
        [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
        [COLOR="#F5F5FF"]
        --[/COLOR]

        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]
              [COLOR="#F5F5FF"]--[/COLOR]
              [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
              [COLOR="#F5F5FF"]
              --[/COLOR]

              Kommentar

              Lädt...
              X