2017-03-02 1 views
0
hat

Dies ist mein Code:AJAX Abfrage korrekten Verweis nicht auf variable

$('.store-card').each(function() { 
 
    placeid = $(this).data('placeid'); 
 
    latlng = $(this).data('latlng'); 
 

 
    card = this; 
 
    console.log("1 ", card); 
 

 
    $.ajax({ 
 
    url: '/stores/placeid/', 
 
    method: "GET", 
 
    data: { 
 
     placeid: placeid 
 
    }, 
 
    dataType: 'json', 
 
    success: function(response) { 
 
     console.log(card); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Das Problem ist hier, dass durch die Zeit die AJAX-Abfragen eine Antwort zurück, die refernce zu card hat bereits geändert, daher card wird immer den Wert des letzten Elements haben.

Dies ist die Ausgabe der Konsole:

1 <div class="store-card" data-map="#slink-10" data-timing="#stmg-10" data-openhours="#sopen-10" data-placeid="ChIJTZD7ufceDTkRXZdMW4ObIM4" data-latlng=""> 
    1 <div class="store-card" data-map="#slink-9" data-timing="#stmg-9" data-openhours="#sopen-9" data-placeid="ChIJK-bJgRwDDTkR5vzdTwSc7JI" data-latlng=""> 
    1 <div class="store-card" data-map="#slink-22" data-timing="#stmg-22" data-openhours="#sopen-22" data-placeid="ChIJk2W43rPjDDkRMeRmDOo8QT8" data-latlng=""> 
    1 <div class="store-card" data-map="#slink-11" data-timing="#stmg-11" data-openhours="#sopen-11" data-placeid="ChIJebql01D7DDkRMELWwmmpS_A" data-latlng=""> 
    <div class="store-card" data-map="#slink-11" data-timing="#stmg-11" data-openhours="#sopen-11" data-placeid="ChIJebql01D7DDkRMELWwmmpS_A" data-latlng=""> 
    <div class="store-card" data-map="#slink-11" data-timing="#stmg-11" data-openhours="#sopen-11" data-placeid="ChIJebql01D7DDkRMELWwmmpS_A" data-latlng=""> 
    <div class="store-card" data-map="#slink-11" data-timing="#stmg-11" data-openhours="#sopen-11" data-placeid="ChIJebql01D7DDkRMELWwmmpS_A" data-latlng=""> 
    <div class="store-card" data-map="#slink-11" data-timing="#stmg-11" data-openhours="#sopen-11" data-placeid="ChIJebql01D7DDkRMELWwmmpS_A" data-latlng=""> 

Wie kann ich sicherstellen, dass jeder $.ajax den entsprechenden Verweis auf card haben wird, anstatt die neueste Referenz?

+1

Vergessen Sie nicht, fügen Sie 'var', wenn Sie Variablen deklarieren! –

+1

Verwenden Sie 'type:" GET "' anstelle von 'method:" GET "'. – Shubham

Antwort

1

Sie müssen festlegen können nicht vergessen var hinzufügen, um alle ersten Variablen deklariert!

So versuchen ändern Code dazu:

var placeid = $(this).data('placeid'); 
var latlng = $(this).data('latlng'); 

var card = this; 
3

Verwenden

var card = this; 

in Ihrem Code snipped, dann ist es eine lokale Variable, die in der Schließung gebunden werden. In Ihrem Code ist es eine globale Variable (= window.card), die durch anderen Code geändert werden kann.

1

Sie context von $.ajax() zu this

$.ajax({ 
    context: this 
}) 
.then(function() { 
    // `this` : `this` within `.each()` 
}) 
+0

@Ajoy jsfiddle https://jsfiddle.net/dduj2nrn/ – guest271314

Verwandte Themen