4 
<html>
<head>
<style type="text/css">
    a.red {
        color: red;
    }
    a.green {
        color: green;
    }   
    a.yellow {
        color: yellow;
    }   
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('a[href^=red]').addClass('red');
        $('a[href$=.jpg]').addClass('green');
        $('a[href*=pic]').addClass('yellow');
    });
</script>
</head>
<body>
<a href="red.gif">red</a></br>
<a href="green.jpg">green</a></br>
<a href="yellowpic.png">yellow</a>
</body>
</html>

質問：

フロントエンドでは、赤色のみが機能し、緑色と黄色は機能しません。なぜですか?

4

2 に答える 2

3

jqueryセレクターの予約文字であるため、エスケープ.するか、属性値を引用符で囲む必要があります。\\.

 $(document).ready(function() {
         $('a[href^=red]').addClass('red');
         $('a[href$=\\.jpg]').addClass('green'); // < --Here 
         //$('a[href$="jpg"]').addClass('green');
         $('a[href*=pic]').addClass('yellow');
    });

デモ

問題は、2 行目に構文エラーが発生し、スクリプトが壊れて 3 行目が実行されないことです。

ドキュメントから

メタ文字 ( !"#$%&'()*+,./:;<=>?@[]^`{|}~ など) を名前のリテラル部分として使用するには、 2 つのバックスラッシュでエスケープする必要があります: \.

于 2013-07-05T03:07:03.370 に答える
3

ドキュメントから

jQuery( "[attribute='value']" )

attribute : 属性名。

value : 属性値。引用符で囲まれていない単一の単語または引用符で囲まれた文字列のいずれかです。

"一致した文字列を追加する必要があります。

$('a[href^="red"]').addClass('red');
$('a[href$=".jpg"]').addClass('green');
$('a[href*="pic"]').addClass('yellow');
           ^   ^

したがって、次のように複数の単語で機能します

$('a[value*="some value"]')

デモ

于 2013-07-05T03:07:03.417 に答える