Aktualisieren des Fortschrittsbalkens basierend auf dem Segmentereignis

Ich versuche den Status eines Fortschrittsbalkens zu aktualisieren, je nachdem, wo ich innerhalb eines Segments klicke.Aktualisieren des Fortschrittsbalkens basierend auf dem Segmentereignis

Ich habe eine Funktion, die die normalisierte relative Position des Klicks innerhalb des Segments (siehe getMousePos unten) zurückgibt, und ich denke, es funktioniert korrekt, indem Sie auf Konsolenausgaben schauen.

Derzeit ändert sich die Fortschrittsleiste überhaupt nicht und ich verstehe nicht warum. Es gibt keine Fehler, die ich in der Konsole sehen kann, und der Callback, der für die Aktualisierung verantwortlich ist, gibt die angeklickte Position mit console.log aus.

Hier ist das kleinste Beispiel, das ich tun konnte, was diesen Fehler reproduziert:

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script> 
</head> 

<body> 

    <div id="foo:s" class="ui segment" style="height:300px"> 
    </div> 
    <div id="foo:p" class="ui progress"> 
     <div class="bar"></div> 
    </div> 

    <script type="text/javascript"> 
     /** 
     * Returns normalised x and y position (between 0 and 1) of mouse pointer, 
     * relative to top-left corner of input DOM element. 
     */ 
     function getMousePos(elm, evt) { 
      var rect = elm.getBoundingClientRect(); 
      return { 
       x: (evt.clientX - rect.left)/(rect.right - rect.left), 
       y: (evt.clientY - rect.top)/(rect.bottom - rect.top) 
      }; 
     } 

     // Initialise progressbar 
     $('#foo:p').progress(); 

     // Bind click events to progress bar state 
     document 
      .getElementById('foo:s') 
      .addEventListener("click", function(evt) { 

       var pos = getMousePos(this, evt); 
       console.log(pos); 

       $('#foo:p').progress({ 
        percent: Math.floor(100 * pos.x) 
       }); 

      }); 
    </script> 

</body> 

</html>

Sie können es auf CodePen laufen sehen.

Quelle

2017-02-13 Sheljohn

<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div id="foo_s" class="ui segment" style="height:300px"> 
 
    </div> 
 
    <div id="foo_p" class="ui progress"> 
 
     <div class="bar"></div> 
 
    </div> 
 

 
    <script type="text/javascript"> 
 
     /** 
 
     * Returns normalised x and y position (between 0 and 1) of mouse pointer, 
 
     * relative to top-left corner of input DOM element. 
 
     */ 
 
     function getMousePos(elm, evt) { 
 
      var rect = elm.getBoundingClientRect(); 
 
      return { 
 
       x: (evt.clientX - rect.left)/(rect.right - rect.left), 
 
       y: (evt.clientY - rect.top)/(rect.bottom - rect.top) 
 
      }; 
 
     } 
 

 
     // Initialise progressbar 
 
     $('#foo_p').progress(); 
 

 
     // Bind click events to progress bar state 
 
     document 
 
      .getElementById('foo_s') 
 
      .addEventListener("click", function(evt) { 
 

 
       var pos = getMousePos(this, evt); 
 
       console.log(pos); 
 

 
       $('#foo_p').progress({ 
 
        percent: Math.floor(100 * pos.x) 
 
       }); 
 

 
      }); 
 
    </script> 
 

 
</body> 
 

 
</html>

Der Fortschrittsbalken ist ein jquery-ui-Element, so dass Sie die Unterstützung für das aufnehmen müssen.

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Um es in Ihrem codepen zu arbeiten, musste ich auch Ihre ‚foo:‘ umbenennen Namen mit ‚foo_‘.

Ich weiß nicht, ob der Doppelpunkt in IDS gültige HTML ist oder nicht.

Quelle

2017-02-13 18:17:50 Kit

Ha, vielen Dank, ich dachte ich habe irgendwo gelesen, dass Doppelpunkte in IDs erlaubt sind, aber das muss falsch gewesen sein. Die jquery UI-Bibliotheken scheinen jedoch nicht notwendig zu sein. – Sheljohn

Wenn Sie Ihre Antwort aktualisieren könnten, um sich auf die Tatsache zu konzentrieren, dass die IDs falsch waren und nicht, dass die jQuery UI-Bibliotheken benötigt wurden, würde ich mich freuen, Sie als Antwort zu markieren. – Sheljohn

Aktualisieren des Fortschrittsbalkens basierend auf dem Segmentereignis

Antwort

Verwandte Themen