Question

我写了这个非常简单的背景选择器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <title>jQuery Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="Normal.css" />

    <script type="text/javascript">

    $(document).ready(function(){

        $("#StyleContrast").click(function() {
           $("link[media='screen']").attr("href", "Contrast.css");
         });

         $("#StylePrint").click(function() {
           $("link[media='screen']").attr("href", "Print.css");
         });

         $("#StyleNormal").click(function() {
           $("link[@media='screen']").attr("href", "Normal.css");
         });

     });

       </script>

 </head>
 <body>
    <h1>Choose A Style:</h1>
    <ul>
       <li><a id="StyleContrast" href="#">Contrast</a></li>
       <li><a id="StylePrint" href="#">Print</a></li>
       <li><a id="StyleNormal" href="#">Normal</a></li>
     </ul>
 </body>
 </html>

我有： Normal.css Print.css Contrast.css

在同一个非常基本的文件夹中：

body {background-color:#000000;}

当我转到URL时，它选择Normal.css（应该如此）

然后它改为Print.css或Contrast.css（应该如此）

但是它不会再回来（不会选择）Normal.css吗？

你能帮我看一下代码有什么问题吗？

Answer 1

 $("#StyleNormal").click(function() { 
       $("link[@media='screen']").attr("href", "Normal.css"); 
     });

应该是

 $("#StyleNormal").click(function() { 
       $("link[media='screen']").attr("href", "Normal.css"); 
     });

另外，我会将您正在使用的jQuery版本更新为1.4.2

您使用[@media='screen']而非[media='screen']

在jQuery 1.4.2中（我认为在jQuery 1.3中）不推荐使用@来进行属性选择。请注意，您在代码的前两次调用中使用它，而不是最后一次调用。：d

Answer 2

如果您想进行优化，可以在链接中添加一个类（比如说“切换器”），然后将jQuery更改为：

 $(function(){
    $(".switcher").click(function() {
       $("link[media=screen]").attr("href", $(this).text() + ".css");
     });
 });

简单的jQuery css背景“选择器”

2 个答案: