Question

我最近开始使用javascript，我想知道如何使此代码正常工作，就像我想要的一样。...下面的代码可以正常工作，但是我想将脚本从my.js文件中调用到标签中我能做到吗？

  <!doctype html>
      <html lang="en">
      <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Range slider</title>
          <link rel="stylesheet" href="jquery-ui.css">
        <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript" src="jquert-ui.js"></script>
         <script type="text/javascript" src="my.js"></script>
       <script>
        $( function() {
          $( "#slider-range" ).slider({
             range: true,
             min: 0,
             max: 500,
             values: [ 75, 300 ],
             slide: function( event, ui ) {
               $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
           }
           });
          $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
  " - $" + $( "#slider-range" ).slider( "values", 1 ) );
         } );
         </script>
       </head>
       <body>


    <p>
       <label for="amount">Price range:</label>
         <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
       </p>

      <div id="slider-range"></div>


       </body>
    </html>

我尝试过：

 <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>RANGE SLIDER</title>
   <link rel="stylesheet" href="jquery-ui.css">
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquert-ui.js"></script>
   <script type="text/javascript" src="my.js"></script>
   <script>
    my.slider('slider-range');
   </script>
 </head>
 <body>


  <p>
   <label for="amount">Price range:</label>
     <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
       </p>

     <div id="slider-range"></div>


      </body>
    </html>

并且我使用一个外部文件来放置这样的滑块功能：

 my = {
   slider: function(elementId) {
         $( "#"+elementId ).slider({
          range: true,
           min: 0,
           max: 500,
           values: [ 75, 300 ],
           slide: function( event, ui ) {
           $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
             }
            });
           $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
  " - $" + $( "#slider-range" ).slider( "values", 1 ) );
         } 


       }

但是，滑块范围div元素中的BUT无法渲染滑块，为什么呢？我如何从my.js调用滑块函数才能在我的html文件中正常工作？

我如何从javascrip中的其他文件调用函数

0 个答案: