Question

以下codepen链接显示了一个简单的范围滑块，我想在我的.hta文件中工作。

问题在于，当我运行.hta文件时，我得到＆＃34; $是未定义的错误＆＃34;，然后当我点击＆＃34;是＆＃34;继续，它只显示这个：

我认为这可能是因为jQuery库没有加载，所以我补充说：

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

但这只是将hta延迟大约30秒然后显示相同的错误。

以下是范围滑块的脚本：

var range = $('.input-range'),
    value = $('.range-value');

value.html(range.attr('value'));
range.on('input', function(){
    value.html(this.value);
});

这是我的.HTA代码。非常感谢你的帮助：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta charset="UTF-8">
<title>Adjustments</title>


<script type="text/vbscript" language="vbscript">

Sub window_onload()
        window.resizeTo 338,545
    End Sub 

</SCRIPT>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

<HTA:APPLICATION icon="C:\Users\ME\Desktop\Abacus\compIcon.ico"
     APPLICATIONNAME="WELCOME"
     SCROLL="no"
     SINGLEINSTANCE="no"
     WINDOWSTATE="normal"
     MinimizeButton="yes"
    MaximizeButton="no"
    RESIZE="no"
  CAPTION="no"
> 

<script type='text/javascript'>
$(document).ready(function() {
var range = $('.input-range'),
    value = $('.range-value');

value.html(range.attr('value'));

range.on('input', function(){
    value.html(this.value);
}); 
});
</script>


<style>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  padding: 40px;
}

.range-slider {

  // Slider
  .input-range {
    -webkit-appearance: none;
    width: 300px;
    height: 10px;
    border-radius: 5px;
    background: #ccc;
    outline: none;

    // Slider Handle
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #353535;
      cursor: pointer;
      -webkit-transition: background .15s ease-in-out;
      transition: background .15s ease-in-out;

      &:hover {
        background: #e06161;
      }
    }

    &:active::-webkit-slider-thumb {
      background: #e06161;
    }

    &::-moz-range-thumb {
      width:20px;
      height: 20px;
      border: 0;
      border-radius: 50%;
      background: #353535;
      cursor: pointer;
      -webkit-transition: background .15s ease-in-out;
      transition: background .15s ease-in-out;

      &:hover {
        background: #e06161;
      }
    }

    &:active::-moz-range-thumb {
      background: #e06161;
    }
  }

  // Tooltip Tag
  .range-value {
    display: inline-block;
    position: relative;
    width: 80px;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: #353535;
    padding: 5px 10px;
    margin-left: 7px;

    &:after {
      position: absolute;
      top: 8px;
      left: -7px;
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-right: 7px solid #353535;
      border-bottom: 7px solid transparent;
      content: '';
    }
  }
}

// Firefox Overrides
::-moz-range-track {
    background: #ccc;
    border: 0;
}

input::-moz-focus-inner { 
  border: 0; 
}

</style>




</head>

<body>

<div class="range-slider">
    <input class="input-range" type="range" value="0" min="-75000" step="500" max="75000">
    <span class="range-value"></span>
</div> 

</body>
</html>

Answer 1

//code.jquery.com/jquery-1.9.1.min.js是协议相对URL。但是，HTA既不是HTTP也不是HTTPs资源。观察网络请求（使用像Fiddler这样的工具）将显示jQuery脚本无法下载。

使用http://code.jquery.com/jquery-1.9.1.min.js代替jQuery源代码。

得到错误＆＃34; $未定义＆＃34;尝试将此范围滑动条添加到.hta文件时

1 个答案: