Question

我试图从外部文件访问jQuery，因为它无法在我的页面上运行。我检查了我的代码，并在互联网上搜索但没有发现我的错误......

clearableformfield.jsp

<html>
<head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="JQuery/jquery.clearable.js"></script>
<link rel="stylesheet" href="JQuery/jquery.clearable.css" type="text/css" />
</head>
<body>
<div id="dom">
<input type="text"  class="foo"></input>
  </div>
<script>
$(document).ready(function() {
    $('.foo').clearable();
});</script>

</body>
</html>

jquery.clearable.js

$(this).css({'border-width': '0px', 'outline': 'none'})
    .wrap('<div id="sq" class="divclearable"></div>')
    .parent()
    .attr('class', $(this).attr('class') + ' divclearable')
    .append('<a class="clearlink" href="javascript:"></a>');

$('.clearlink')
    .attr('title', 'Click to clear this textbox')
    .click(function() {

        $(this).prev().val('').focus();

});

jquery.clearable.css

.divclearable {
    border: 1px solid #888;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;
    padding-right:5px;
    vertical-align:middle;
}

a.clearlink {
    background: url("close-button.png") no-repeat scroll 0 0 transparent;
    background-position: center center;
    cursor: pointer;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;
    height: 12px;
    width: 12px;
    z-index: 2000;
    border: 0px solid;
}

#dom{
    background-color:#b0c4de;}
}

所有这些文件都在JQuery文件夹中的Web内容中

Answer 1

您的文件路径应该是这样的

xxx.html
JQuery [folder]
   |
   |---jquery.clearable.js
   |---jquery.clearable.css
   '---close-button.png

<强>更新

您的HTML文件应该是这样的

<HTML>
<HEAD>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="JQuery/jquery.clearable.js"></script>
    <link rel="stylesheet" href="JQuery/jquery.clearable.css" type="text/css" media="screen"/>

    <TITLE>Clearable Textboxes in jQuery</TITLE>

</HEAD>
<BODY>


<input type="text" class="clearable style1" size="30"></input>
&nbsp;
<input type="text" class="clearable style1"></input>

</BODY>
<SCRIPT>
$(document).ready(function(){
$('.clearable').clearable()
});
</SCRIPT>
</HTML>

JQuery / jquery.clearable.js 文件应该是这样的

jQuery.fn.clearable = function() {

    $(this).css({'border-width': '0px', 'outline': 'none'})
        .wrap('<div id="sq" class="divclearable"></div>')
        .parent()
        .attr('class', $(this).attr('class') + ' divclearable')
        .append('<a class="clearlink" href="javascript:"></a>');

    $('.clearlink')
        .attr('title', 'Click to clear this textbox')
        .click(function() {

            $(this).prev().val('').focus();

    });
}

JQuery / jquery.clearable.css 文件应该是这样的

.divclearable {
    border: 1px solid #888;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;    
    padding-right:5px;
    vertical-align:middle;
}

a.clearlink {
    background: url("close-button.png") no-repeat scroll 0 0 transparent;
    background-position: center center;
    cursor: pointer;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;    
    height: 12px;
    width: 12px;
    z-index: 2000;
    border: 0px solid;
}

并将此图像添加到JQuery文件夹中：

enter image description here

Answer 2

您需要在html文件的最顶部包含这样的DOCTYPE：

<!DOCTYPE html>

这可能会导致旧版Internet Explorer出现问题，并可能导致您的问题。

如果没有更多信息，很难说出问题所在，您使用的浏览器是什么？控制台（firebug / IE Developer tools / Chrome开发工具）中出现的错误是404错误还是其他JavaScript错误？

您的目录结构是什么样的？你确定事情是在正确的地方，你没有错误的名字吗？我注意到你把文件夹名称设为JQerey这是故意拼写还是错误？

也可能是文件以错误的Mime类型返回，但我怀疑是这种情况。

JQuery和CSS文件无法使用外部文件

2 个答案: