セグメントイベントに基づいて進行状況バーを更新します

セグメント内をクリックする場所によって進行状況バーの状態を更新しようとしています。セグメントイベントに基づいて進行状況バーを更新します

私は、セグメント内のクリックの正規化された相対位置を返します（下記のgetMousePosを参照してください）、コンソール出力を見れば正しく動作すると思います。

現在、プログレスバーはまったく変更されていません。理由はわかりません。コンソールに表示されるエラーはなく、更新を行うコールバックはconsole.logでクリックした位置を正しく出力します。ここで

は、このエラーを再現した、私が思い付くことができ、最小の例である：

<!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>

あなたはそれがCodePen上で実行して見ることができます。

出典

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>

プログレスバーはjqueryの-UI要素であるので、あなたはそのためのサポートを含める必要があります。

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

あなたのcodepenで動作するようにするには、 'foo：'の名前を 'foo_'に変更する必要がありました。

IDSのコロンが有効なHTMLであるかどうかわかりません。

出典

2017-02-13 18:17:50 Kit

Ha、ありがとう、私はどこかでコロンがIDで許可されていると読んだと思ったが、間違っていたはずである。しかし、jqueryのUIライブラリは必要ではないようです。 – Sheljohn

IDが間違っていて、jQuery UIライブラリが必要でないという事実に焦点を当てて答えを更新していただけたら、私は答えとしてあなたをマークして喜んでおきます。 – Sheljohn

セグメントイベントに基づいて進行状況バーを更新します

答えて

関連する問題