1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Vereinfachen Eines Skriptes & laden

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von Andrin Spitzer, 28. Dezember 2016.

  1. Andrin Spitzer

    Andrin Spitzer Mitglied

    Hallo zusammen.
    Da ich noch am js lernen bin brauch ich mal kurtz eure hilfe:

    ich habe auf meiner website eine navigation mit 4 buttons und eine section="content". mit jedem button kan ich den inhalt einer externen .html in die section="content" laden das funktionirt so auch schon mal gut. meine frage ist kann ich das noch kompakter machen? und wie kann sobald ich die website aufrufe den content home automatisch ladaen?

    HTML:
    1.             <ul>
    2.                 <li class="nh"><a id="m_home">DeskToper</a></li>
    3.                 <li class="n1"><a id="m_shop">Shop</a></li>
    4.                 <li class="n2"><a id="m_team">Team</a></li>
    5.                 <li class="n3"><a id="m_service">Service</a></li>
    6.                 <li class="quebec">&nbsp;</li>
    7.             </ul>
    HTML:
    1. <section id="main">
    Code (Java):
    1. $(document).ready(function() {
    2.    $('#m_home').click( function() {
    3.      var text = $(this).text();
    4.      $("#main").load("content/home.html");
    5.    });          
    6. });
    7. $(document).ready(function() {
    8.    $('#m_shop').click( function() {
    9.      var text = $(this).text();
    10.      $("#main").load("content/shop.html");
    11.    });          
    12. });
    13. $(document).ready(function() {
    14.    $('#m_team').click( function() {
    15.      var text = $(this).text();
    16.      $("#main").load("content/team.html");
    17.    });          
    18. });
    19. $(document).ready(function() {
    20.    $('#m_service').click( function() {
    21.      var text = $(this).text();
    22.      $("#main").load("content/service.html");
    23.    });          
    24. });


    ich freue mich auf ihre hilfe.

    ps: ich habe bereits gegoogelt aber nichts gefunden was meinen vorstellungen entsprach.
     
  2. DerKleene1

    DerKleene1 Mitglied

    Mal auf die schnelle, denke da dies so meinst.

    HTML:
    1. <ul>
    2.     <li class="nh navi_js" id="m_home">DeskToper</li>
    3.     <li class="n1 navi_js" id="m_shop">Shop</li>
    4.     <li class="n2 navi_js" id="m_team">Team</li>
    5.     <li class="n3 navi_js" id="m_service">Service</li>
    6.     <li class="quebec">&nbsp;</li>
    7. </ul>
    8.  
    9. <section id="main">
    10.  
    11.  
    12. <script src="http://code.jquery.com/jquery-latest.js"></script>
    13.  
    14. $(document).ready(function() {
    15.  
    16.   $("#main").load("content/m_home");
    17.  
    18.   $(".navi_js").click(function() {
    19.     var id = $(this).attr("id");
    20.     $("#main").load("content/"+id);
    21.   });
    22. });
    23.  
    Habe zu Deiner Class noch eine hinzugefügt (navi_js), und dann eine Funktion erstellt, beim Klicken aufgerufen wird.
    Dann lese ich aus was in der ID steht, und übergebe dies dann in den load Befehl.

    So würde ich dies lösen, aber ich programmiere auch nur Hobby mäßig, evtl. geht es noch schöner.
     
    Zuletzt bearbeitet: 28. Dezember 2016
  3. Andrin Spitzer

    Andrin Spitzer Mitglied

    Hay danke für die schnelle antwort. leider funtkionirt bei mir das so nicht. ich weiss nicht ob es einen fehler hatt oder ob es mich einfach nur ärgern möchte. ich hoffe du hast sonst noch eine idee. Freundlich grüsse.

    A.Spitzer
     
  4. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Soweit schon sehr gut! Allerdings ist die ID nicht genau gleich dem Namen der HTML-Datei. Statt die ID zweckzuentfremden, würde ich vorschlagen, ein data-Attribut zu verwenden, wie HTML es vorsieht:
    HTML:
    1. <li class="nh navi_js" data-filename="home" id="m_home">DeskToper</li>
    Code (Javascript):
    1. [*]  $(".navi_js").click(function() {
    2.     var filename = $(this).attr("data-filename");
    3.     $("#main").load("content/"+ filename + ".html");
    4.   });
     
  5. Andrin Spitzer

    Andrin Spitzer Mitglied

    dan müsste das so ausehen?

    HTML:
    1. <li class="nh navi_js" data-filename="home"><a id="m_home">DeskToper</a></li>
    2. <li class="n1 navi_js" data-filename="shop"><a id="m_shop">Shop</a></li>
    3. <li class="n2 navi_js" data-filename="team"><a id="m_team">Team</a></li>
    4. <li class="n3 navi_js" data-filename="service"><a id="m_service">Service</a></li>

    und

    Code (Javascript):
    1.   $(".navi_js").click(function() {
    2.     var filename = $(this).attr("data-filename");
    3.     $("#main").load("content/"+ filename + ".html");
    4.   });
     
  6. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Ja. Ein $(document).ready(function() {} genügt hier vollkommen.
    Code (jQuery):
    1. $(document).ready(function() {
    2.    // jQuery-Scripts
    3. });
     
    Zuletzt bearbeitet: 28. Dezember 2016
  7. Andrin Spitzer

    Andrin Spitzer Mitglied

    oki danke. jetz ist meine andere frage noch wie mache ich das:
    Code (Java):
    1. $(document).ready(function() {
    2.    $('#m_home').click( function() {
    3.      var text = $(this).text();
    4.      $("#main").load("content/home.html");
    5.    });  
    sobald die seite lädt/geladen hatt ausgeführt wird?
     
  8. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Hat Dir @DerKleene1 zwar schon zu Beginn des Themas in Post #2 gezeigt, aber gerne nochmal - siehe Zeile 3:
    Code (jQuery):
    1. $(document).ready(function() {
    2.  
    3.    $("#main").load("content/home.html");
    4.  
    5.   // Klick-Buttons
    6.    
    7. });
    [edit]Tipp-Ex[/edit]
     
    Zuletzt bearbeitet: 28. Dezember 2016
  9. DerKleene1

    DerKleene1 Mitglied

    Mal mit den Änderungen von @Sempervivum getestet. Es klappt wunderbar.
    HTML:
    1. <ul>
    2.   <li class="nh navi_js" data-filename="home"><a id="m_home">DeskToper</a></li>
    3.   <li class="n1 navi_js" data-filename="shop"><a id="m_shop">Shop</a></li>
    4.   <li class="n2 navi_js" data-filename="team"><a id="m_team">Team</a></li>
    5.   <li class="n3 navi_js" data-filename="service"><a id="m_service">Service</a></li>
    6.   <li class="quebec">&nbsp;</li>
    7. </ul>
    8.  
    9. <section id="main">
    10.  
    11.  
    12. <script src="http://code.jquery.com/jquery-latest.js"></script>
    13.  
    14. $(document).ready(function() {
    15.  
    16.   $("#main").load("content/home.html");
    17.  
    18.   $(".navi_js").click(function() {
    19.     var filename = $(this).attr("data-filename");
    20.     $("#main").load("content/"+ filename + ".html");
    21.   });
    22. });
    23.  
    Wie man in der Console (F12 in den meisten Browsern) sehen kann.
    https://jsfiddle.net/uvg1yg3q/2/
     
  10. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Ich finde den Ansatz von dir, DerKleen1, die Click-Handler in einem zusammen zu fassen, sehr gut! Der TO hat ja explizit gefragt, wie man seinen Code kompakter machen kann. Außerdem kann man das Ganze auf diese Weise erweitern, indem man das nur HTML ändert und muss das Javascript nicht anfassen. Bedauerlich, dass Du, Spicelab, das ignorierst.
     
    Zuletzt bearbeitet: 28. Dezember 2016
  11. SpiceLab

    SpiceLab ZENmechanic Premium-User

    o_O

    Ihr zwei hattet dazu schon längst was gepostet, als ich hier zugestiegen bin, und mich mit Post #6 wegen dem multiplen $(document).ready() zu Wort gemeldet habe, und mich daraufhin die erneute Frage nach dem automatischen Laden von "home.html" in #main erreichte.

    Sorry, dass Eure Entwicklungsstufen in meine zwei Codesnippets nicht eingeflossen sind! :p

    [edit]Tipp-Ex[/edit]
     
    Zuletzt bearbeitet: 28. Dezember 2016
  12. Andrin Spitzer

    Andrin Spitzer Mitglied

    Danke jetzt hat alles geklappt. Ein guten Rutsch ins neue jahr wünsche ich euch.
     
Die Seite wird geladen...