2017-02-06 2 views
1

Ich habe ein Problem, das ich seit einiger Zeit versuche zu lösen, und würde jede Hilfe sehr schätzen.Ändern des Daten-Prozent-Attributs basierend auf Funktionsergebnissen?

Ich habe einen Fortschrittsbalken mit den folgenden Attributen bekommt:

<div class="bar-cont" data-percentage="0"> 

Wenn ich den Daten-Prozentsatz manuell zu ändern, zwischen 0-100, dann wird der Fortschrittsbalken funktioniert perfekt.

Der Prozentsatz hängt jedoch vom Benutzer ab. Daher habe ich mich gefragt, ob es möglich ist, den Datenprozentsatz auf das Ergebnis des folgenden Codes zu setzen (der nur nach dem Klicken auf eine Schaltfläche ein Ergebnis liefert).

Math.floor(finalResult.result[0]* 100) 

Der obige Code hat einen Wert erzeugen zwischen 0-100 & innerhalb von ein paar Funktionen verschachtelt ist.

Ich habe verschiedene Methoden wie QuerySelectorAll, GetElementById, SetAttribute usw. ohne Erfolg ausprobiert.

Von meinem Verständnis, die Daten-Prozentsatz könnte in der Tat kein Attribut überhaupt sein, wie geschrieben zu sein scheint als:

var percentage = $(bar).data('percentage')/100; 

Antwort

2

Sie können die folgenden verwenden Sie den Wert eines Daten Attribut zu setzen:

document.querySelector('.bar-cont').dataset.percentage = 50; 

Oder mit jQuery:

$('.bar-cont').data('bar-cont', 50); 

Beide werden den Wert des Datensatzes Attribut 50.

+0

Das funktioniert, wenn ich es im globalen Bereich setzen, aber nicht, wenn es verschachtelt (in ein paar Funktionen und eine if/else-Anweisung). Ich frage mich, ob es ein Problem ist, dass die Fortschrittsanzeige nicht aktualisiert wird, nachdem die Schaltfläche angeklickt wurde? – Jack

+0

@Jack Diese Antwort ist in keiner Weise an einen bestimmten Bereich gebunden. – Schlaus

+0

@Schlaus Ach richtig, danke. Ist es wahrscheinlich ein Problem, dass der Fortschrittsbalken nach dem Klicken auf die Schaltfläche nicht aktualisiert wird und die Ergebnisse zurückgegeben werden? Weil, wenn ich etwas wie 'document.querySelector ('. Bar-cont') .dataset.percentage = 50;', wie oben vorgeschlagen mache, dann überschreibt das 'data-percentage', wenn ich die Seite lade. Wenn ich jedoch denselben Code in eine Funktion einfüge, wird er nicht überschrieben, wenn die Funktion aufgerufen wird. – Jack

0

Haben Sie versucht:

var percentage = $('.bar-cont').data('percentage')/100; 
... or any other calculation 
$('.bar-cont').data("percentage", percentage); 
Verwandte Themen