2016-11-20 5 views
0

Ich habe ein besonderes Problem, das ich nicht um meinen Kopf zu wickeln scheinen. Ich benutze Reddit Api, um die Daten zu erhalten.jQuery append innen für Schleife

$(function() { 

    console.log("is it loading") 

    axios.get('http://www.reddit.com/r/DrunkOrAKid/hot.json?sort=hot') 
    .then(function(data){ 
    var q; 
    for(var i = 2; i < data.data.data.children.length; i++){ 
     q = data.data.data.children[i]; 
     $('#main').append('<h4>' + q.data.title + '</h4><br><button class="btn btn-success trigger">answer</button><div class="answer">'+ q.data.selftext +'</div>') 


     $('.answer').hide() 


     $('.trigger').click(function(e){ 
     e.preventDefault() 
     console.log("clicked", [i]); 
     $('.answer').show() 
     }) 
    } 
    }).catch(function(error){ 
    console.log("error occured") 
    }) 
}) 

wollte Also im Grunde AKTUALISIERT ich die Antwort mit #trigger zeigen. Aber das Problem liegt, wenn ich die # trigger-Taste klickte, zeigt das Array 27 Count statt der tatsächlichen Anzahl, die 26 ist. Es hat irgendwie eine Anzahl hinzugefügt, wenn ich auf # trigger-Taste klicke. Im Moment kann ich nicht auf die Schaltfläche klicken, um die Antwort anzuzeigen. Jede Hilfe würde sehr geschätzt werden

+2

Warum hängen Sie Variablen an Zeichenfolgen mit '[Variable]' an? Das erzeugt ein unnötiges Array. Außerdem sollten Sie in Betracht ziehen, Klassen für diese Felder zu verwenden, anstatt eine ID zu erstellen, die aufgelistet wird. Sie können dann die Klasse auswählen und das 'eq (index)' von ihnen zum Arbeiten bekommen. – Taplar

+0

Ich habe schon in Klasse gewechselt, es scheint nicht zu funktionieren. Ich bin mir nicht sicher, was du in der ersten Frage gemeint hast. Ich füge [i] an meine ID an, weil ich wollte, dass jeder Button und jede Antwort unterschiedliche IDs voneinander haben. Momentan gibt es 26 Indexe in meinem Array, also gibt es 26 Buttons und Antworten. und wenn ich zum Beispiel auf den dritten Indexbutton klicke, sollte es mir nur die dritte Antwort zeigen. – Irsyad14

+0

[] außerhalb einer Zeichenfolge ist ein Array. In der Regel verketten Sie ein Array nicht mit einer Zeichenfolge. Haben Sie versucht, die ID dem Muster 'name [#]' zu folgen? In jedem Fall mit einer Klasse brauchen Sie nichts davon. Können Sie Ihre Frage mit der neuen Logik aktualisieren und was funktioniert nicht? – Taplar

Antwort

0

Versuchen Sie es und sehen. Es macht keine Nachschlagewerke. Es verwendet/bind an den Elementen, so wie sie es machen. Ein besserer Ansatz könnte die Verwendung eines delegierten Listeners mit kontextabhängigen Suchvorgängen sein.

axios.get('http://www.reddit.com/r/DrunkOrAKid/hot.json?sort=hot') 
     .then(function(data) { 
      var $main = $('#main'); 

      //use slice so you can use forEach instead of rolling your own for loop 
      data.data.data.children.slice(2).forEach(function(child){ 
       //instead of looking up trigger, create it so you can do whatever you want with it 
       var $trigger = $('<button class="btn btn-success">answer</button>'); 
       //same with answer 
       var $answer = $('<div class="answer">'+ child.data.selftext +'</div>'); 

       $answer.hide(); 

       $trigger.on('click', function(e){ 
        e.preventDefault(); 
        $answer.show(); 
       }); 

       $main 
        .append('<h4>'+ child.data.title +'</h4><br>') 
        .append($trigger) 
        .append($answer); 
      }); 
     }).catch(function(error) { 
      console.log("error occured") 
     }); 
    }); 
+0

Yeah, es funktioniert. Danke. Können Sie erklären, warum ich forEach anstatt verwenden muss for loop? Was ist der Unterschied zwischen den beiden? Eine andere ist, was ist der Grund dafür, den Append am Ende anstatt an meinem Ansatz zu setzen? und was ist Lookups? Ich versuche, die Logik wirklich zu verstehen, anstatt nur Paste kopieren. Danke für die Antwort wieder – Irsyad14

+0

forEach ist ein bisschen sauberer als für, da Sie nicht den Überblick über den Index und dergleichen haben müssen.Sie beide tun die gleiche Logik, aber forEach macht viel von der kuppelnden. Die Reihenfolge des Anhängens und der Bindung wirklich nicht Angelegenheit. Obwohl Sie wahrscheinlich das hide() vor dem Append ausführen möchten, weil append einen Browser-Redraw durchführt, und so wird hide/show angezeigt. Wenn Sie ausblenden, bevor es an die Seite angefügt wird, gibt es kein Neuzeichnen. Also 1 Neuzeichnen vs 2. $ (Selektor) ist ein Nachschlagen, vorausgesetzt, der Selektor ist eine Zeichenkette und keine Funktion/Objekt. – Taplar

+0

Alles ist jetzt klar. Danke für die Hilfe. – Irsyad14