0

外部ファイルから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 コンテンツ内にあります。

4

2 に答える 2

1

HTML ファイルの一番上に、次のような DOCTYPE を含める必要があります。

<!DOCTYPE html>

これにより、古いバージョンの Internet Explorer で問題が発生する可能性があり、問題が発生している可能性があります。

これ以上の情報がなければ、何が問題なのか、どのブラウザを使用しているのかを判断するのは非常に困難です。コンソール (firebug/IE Developer tools/Chrome dev tools) でスローされるエラーは、404 エラーですか、それとも別の JavaScript エラーですか?

ディレクトリ構造はどのようになっていますか? 物事が正しい場所にあり、名前を間違えていないことを確信していますか? これJQereyは意図的なつづりですか、それとも間違いですか?

ファイルが間違った Mime Type で返されている可能性もありますが、そうではない可能性があります。

于 2013-06-10T08:31:25.487 に答える
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 フォルダーに追加します。

于 2013-06-10T07:45:46.203 に答える