Question

在下面的HTML中，我想使用JQuery更改<li>的背景。但它没有用。如果我在CSS中硬编码背景值，代码就可以工作。

我的CSS。使用JQuery的find方法，我想将li.tmpFound类分配给应更改背景颜色的<li>元素

body {
 font: 24px sans-serif;
}


ul#tmpFavorites {
 list-style:none;
 margin:0;
 padding:0;
}

a {
 text-decoration:none;
}


ul#tmpFavorites li {
 padding: 3px;
 margin: 1px;
}


li.tmpFound {
    background: yellowgreen;
}

JS代码

if ($) {

$(document).ready (
 function(){
  /* assign the class after finding all li*/
  $('ul#tmpFavorites').find('li').addClass('li.tmpFound');

 }
);


}

HTML - 包含ul和2 li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style type="text/css">

    </style>

    <script type="text/javascript" src="jquery-1.9.0.min.js")"></script>
    <script type="text/javascript" src="Example 1-1c.js"></script>
    <link rel="stylesheet" type="text/css" href="Example 1-1c.css">
</head>
<body>

<ul id="tmpFavorites">
    <li><a href="http://www.amazon.com">Amazon</a></li>
    <li><a href="http://www.google.com">Google</a></li>
</ul>
</body>
</html>

Answer 1

$('ul#tmpFavorites').find('li').addClass('tmpFound');

您无法将选择器传递给.addClass()，而是传递名称。因此，请使用li.tmpFound而不是tmpFound。问题不在于您无法传递看起来像选择器的名称。如您的代码所示，将添加类“li.tmpFound”。但是你只想在CSS中添加类tmpFound。所以请改用它。

$(document).ready(function() {
  $('ul#tmpFavorites').find('li').addClass('tmpFound');
});

body {
  font: 24px sans-serif;
}

ul#tmpFavorites {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

ul#tmpFavorites li {
  padding: 3px;
  margin: 1px;
}

li.tmpFound {
  background: yellowgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tmpFavorites">
  <li><a href="http://www.amazon.com">Amazon</a></li>
  <li><a href="http://www.google.com">Google</a></li>
</ul>

JQuery＆＃39;发现＆＃39;方法不起作用

1 个答案: