Kann "Data-Attribut" nicht aktualisieren Wert

Question

Die Upload-Leiste muss aktualisiert werden und ich denke, alles ist wahr, aber ich kann die data-value nicht aktualisieren.

HTML-Code:

<div id="Result_Success" class="progress-Bar" data-value="0"></div> 

Javascript:

success: function (response) { 
     $("#Result_Success").data('value', response["yuzdelik"]); 
} 

Wo liegt der Fehler?

Answer 1

Sie brauchen

javascript $("#Result_Success").attr('data-value', response["yuzdelik"]);

Answer 2

Fehler in der letzten Zeile ist (keine Zitate erforderlich):

$ ("# Result_Success") Daten ('Wert', response.yuzdelik);.

Answer 3

Ein anderer Ansatz besteht darin, direkt auf die Eigenschaft dataset des Elements zuzugreifen, um es zu ändern. Um dies zu tun, müssen Sie einen Verweis auf den Raw-DOM-Knoten erhalten, der nicht von einem jQuery-Objekt umschlossen wird. Sie können den Raw-DOM-Knoten mithilfe der get-Methode $("#Result_Success").get(0) von jQuery oder mithilfe von array-like nature von jQuery unter Verwendung von $("#Result_Success")[0] abrufen, wie im folgenden Beispiel.

function setResponse (response) { 
 
     $("#Result_Success")[0].dataset.value = response["yuzdelik"]; 
 
} 
 

 

 
let val = 0; 
 
let timer = setInterval(function() { 
 
    setResponse({yuzdelik: val}); 
 
    if (val >= 100) { 
 
     clearInterval(timer); 
 
    } else { 
 
     val += 25; 
 
    } 
 
    }, 500);

#prog { 
 
    border: 1px #000 solid; 
 
} 
 
#Result_Success { 
 
    height: 20px; 
 
    background: #0f0; 
 
} 
 

 
#Result_Success[data-value="0"] { 
 
    width: 0%; 
 
} 
 

 
#Result_Success[data-value="25"] { 
 
    width: 25%; 
 
} 
 

 
#Result_Success[data-value="50"] { 
 
    width: 50%; 
 
} 
 

 
#Result_Success[data-value="75"] { 
 
    width: 75%; 
 
} 
 

 
#Result_Success[data-value="100"] { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="prog"> 
 
<div id="Result_Success" class="progress-Bar" data-value="0"></div> 
 
</div>

Der Grund, dass $("#Result_Success").data() Verwendung ist nicht funktioniert, dass es tatsächlich data- Attribute nicht ändern. jQuery speichert den Datensatz mit .data in sich. jQuery tut dies, anstatt die Elementattribute zu ändern, um circular references zu vermeiden. Zirkuläre Verweise auf DOM-Elemente sind heutzutage nicht wirklich eine große Sache, aber zurück, als IE relevanter war, denn in älteren Versionen von IE (insbesondere IE6) haben sie would cause memory leaks, als Sie das Element aus dem DOM entfernt haben.

Es kann ein wenig verwirrend werden, dass dies ist, was es tatsächlich tut, weil jQuery pull any data- attributes into its own internal data wird. Die Dokumentation lautet:

Die Datenattribute werden beim ersten Zugriff auf die Dateneigenschaft abgerufen und dann nicht mehr abgerufen oder mutiert (alle Datenwerte werden dann intern in jQuery gespeichert).