Wie dynamisch Fortschrittsbalkenwert in jQuery gesetzt?

Auf meiner Tutorial-Website verwende ich jQuery-UI-Fortschrittsbalken nicht als Balken, die sich ändern, sondern als anzuzeigende Bilder, um dem Benutzer zu zeigen, wie weit er durch das Lernprogramm gekommen ist. Beispiel:Wie dynamisch Fortschrittsbalkenwert in jQuery gesetzt?

$(document).ready(function() { 
 
    $(.progressbar).progressbar({ 
 
    value: 50 
 
    }); 
 
});

<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css"> 
 
<script type="text/javascript" src="JS/jQuery.js"></script> 
 
<script type="text/javascript" src="JS/jQueryUI.js"></script> 
 
<script type="text/javascript" src="JS/index.js"></script> 
 

 
<body> 
 
    Lots of stuff here 
 
    <div class="progressbar"></div> 
 
    <span style="text-align: center">50% complete</span> 
 
    Lots more stuff here 
 
</body>

jedoch, was ich will es mehrere Fortschrittsbalken mit unterschiedlichen Werten zu tun haben. Ich möchte eine Klasse für die Fortschrittsbalken und ein benutzerdefiniertes Attribut für ihren Wert haben. Etwas wie folgt aus:

$(document).ready(function() { 
 
    $(.progressbar).progressbar({ 
 
    value: $(.progressbar).attr("data-progress-value"); 
 
    }); 
 
});

<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css"> 
 
<script type="text/javascript" src="JS/jQuery.js"></script> 
 
<script type="text/javascript" src="JS/jQueryUI.js"></script> 
 
<script type="text/javascript" src="JS/index.js"></script> 
 

 
<body> 
 
    Lots of stuff here 
 
    <div class="progressbar" data-progress-value="33"></div> 
 
    <span style="text-align: center">33% complete</span> Lots more stuff here 
 
    <div class="progressbar" data-progress-value="67"></div> 
 
    <span style="text-align: center">67% complete</span> More stuff here 
 
    <div class="progressbar" data-progress-value="90"></div> 
 
    <span style="text-align: center">90% complete</span> 
 
</body>

Ich weiß, dass dieser Code wird aber nicht funktionieren, weil die jQuery docs .attr sagen und alle ähnlichen Funktionen nur das Attribut des ersten des Satzes erhalten.

Ist so etwas in jQuery möglich?

Oder, für das XY-Problem, das hier angezeigt wird, Wenn dies nicht möglich ist, wie kann ich statische Fortschrittsbalken dynamisch festlegen?

Vielen Dank im Voraus.

Quelle

2017-07-30 OldBunny2800

Ziemlich einfach in einem each(), wo Sie Zugriff auf jede Elementinstanz haben, bevor Sie das Plugin für dieses Element initialisieren.

$(function() { 
 
    $('.progressbar').each(function() { 
 
    var $el = $(this); 
 
    $el.progressbar({ 
 
     value: $el.data("progress-value") 
 
    }); 
 
    }); 
 
})

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
 

 

 
Lots of stuff here 
 
<div class="progressbar" data-progress-value="33"></div> 
 
<span style="text-align: center">33% complete</span> Lots more stuff here 
 
<div class="progressbar" data-progress-value="67"></div> 
 
<span style="text-align: center">67% complete</span> More stuff here 
 
<div class="progressbar" data-progress-value="90"></div> 
 
<span style="text-align: center">90% complete</span>

Quelle

2017-07-30 12:42:38 charlietfl

Das ist genau das, was ich gesucht habe zum! Vielen Dank! – OldBunny2800

Was machen die '|| 0' und das '+' vor '$ el $ tun? – OldBunny2800

Wert muss Zahl sein ... 'attr()' gibt String zurück. Das '|| 0 'ist für den Fall, dass das Attribut nicht definiert ist, oder – charlietfl

Sie könnten eine weitere Klasse einzigartig für jeden Fortschrittsbalken, wie PB1 hinzufügen, PB2 usw.

Dann einfach

$(document).ready(function() { 
    $(.pb1).progressbar({ 
    value: 75 
    }); 
$(.pb2).progressbar({ 
    value: 50 
    }); 
});

Quelle

2017-07-30 12:50:58 Sam

Danke für die Antwort, aber ich suchte nach etwas wiederverwendbarem für verschiedene HTML-Dateien, wo die Werte unterschiedlich sein könnten. – OldBunny2800

Ja ich mag @charlietfl in diesem Szenario besser antworten. – Sam

Wie dynamisch Fortschrittsbalkenwert in jQuery gesetzt?

Antwort

Verwandte Themen