2017-03-12 3 views
1

Meine Funktion soll ein div durch ein Bild ersetzen und nach einer gewissen Zeit wieder auf dasselbe div zurücksetzen. Beim Ersetzen des Divs gibt es benutzerdefinierte HTML-Datenattribute, die ich hinzufügen muss, aber mit der replaceWith() -Methode muss ich das div zuerst setzen und danach ersetzen. In diesem Fall muss ich die Attribute 'data-x' und 'data-y' aktualisieren, die als erstes Element in den Arrays x_cord und y_cord gespeichert werden. Der erste Teil der Funktion funktioniert wie vorgesehen, das Problem tritt im Abschnitt setTimeout auf.replace() mit dem zweiten Parameter als Variable?

Ich habe versucht, einen Platzhalter zu verwenden, um durch den Wert zu ersetzen, der changex und changey genannt wird. Ich kann nicht revert.replace ("changex", x_cord [0]) verwenden, um wie beabsichtigt zu arbeiten, oder werde ich das nicht tun können? Ich habe mein Problem nachgeschlagen und habe Lösungen für reguläre Ausdrücke gefunden, aber das gilt nur für die Zeichenfolge, nach der die Leute suchen, und nicht für die Zeichenfolge, zu der sie geändert werden sollen.

tl; dr: Ich muss 'changex' und 'changey' zu x_cord [0] und y_cord [0] ändern.

function explode(e){ 
var obj = $(e); 
var replacer = $('<img width="25px" height="25px" src="http://i.imgsafe.org/c07fe0155d.gif" data-x="" data-y=""></img>'); 
obj.replaceWith(replacer); 
var found = $("#gameArea").find("img"); 
setTimeout(function(){ 
    var revert = '<div class="grass gameTile" data-component="" data-x="changex" data-y="changey"></div>'; 
    var x = revert.replace("changex", String(x_cord[0])); 
    x_cord.splice(0,1); 
    var y = revert.replace("changey", String(y_cord[0])); 
    y_cord.splice(0,1); 
    $(found[0]).replaceWith(revert); 
}, 1200); 

}

Antwort

1

Was ist x_cord und y_cord? Anyways, um die es sollte

setTimeout(function(){ 
var revert = '<div class="grass gameTile" data-component="" data-x="changex" data-y="changey"></div>'; 
revert = revert.replace("changex", String(x_cord[0])); 
x_cord.splice(0,1); 
revert = revert.replace("changey", String(y_cord[0])); 
y_cord.splice(0,1); 
$(found[0]).replaceWith(revert); 
}, 1200); 

Sie setzen nicht den Wert von revert sein angewendet werden so ersetzen, wenn Sie es ändern Sie beliebige Variablen definieren. Das macht nichts.

+0

x_cord und y_cord sind die Koordinaten des div, die als Teil einer großen Karte von Fliesen angeklickt wird. Danke für die Antwort! –

+0

Sind x_cord und y_cord bereits Zeichenfolgen? –

+0

Wie im ersten Beitrag erwähnt, sind x_cord und y_cord Arrays –

0

Sie können wörtliche Vorlage ersetzen für .replace()

var x_cord = [123], 
 
    y_cord = [456]; 
 

 
var revert = `<div class="grass gameTile" 
 
         data-component="" 
 
         data-x="${x_cord[0]}" 
 
         data-y="${y_cord[0]}"> 
 
        </div>`; 
 
        
 
$("img").replaceWith(revert); 
 

 
console.log($(".grass").data())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img>

Verwandte Themen