如何使用jQuery选择单个元素

Question

我想设置一个无序食材列表。当点击一个食材（<li>）时，它的background-color应该变成黄色。

使用下面的代码，我能够点击食材并改变背景颜色。然而，我无法针对单个元素进行操作。如何使得只有被点击的<li>的背景颜色改变？

$('#lili>li').click(function () {
  $('li').css('background-color', 'yellow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ingred">
  <h3>INGREDIENTS</h3>
  <ul id="lili">
    <li>3 Tbsp soy sauce</li>
    <li>1 teaspoon brown sugar</li>
    <li>1 Tbsp olive oil</li>
    <li>2/3 cup diced red onion</li>
    <li>2/3 cup diced red bell pepper</li>
    <li>2 cloves garlic, minced</li>
    <li>1-inch piece of ginger, grated</li>
    <li>3 eggs, well beaten</li>
    <li>4 cups day old cooked white rice (from about 2 cups of raw rice)</li>
    <li>1 cup frozen peas, thawed</li>
    <li>2 cups cooked salmon in large chunks</li>
    <li>2 green onions, thinly sliced, including the greens</li>
    <li>Cilantro (or parsley) for garnish</li>
  </ul>
</div>

- Zarley

---

使用 $(this).css('background-color','yellow'); - Suraj Rawat

写下 $(this).css('background-color','yellow');。"This" 指的是当前被点击的对象，否则你的代码会改变所有的 "li"。 - Nikhil Batra

请花点时间查看您问题的修订历史，并注意您的问题从最初发布时如何变化。将来，请尽可能清晰简洁地提出您的问题。格式非常重要（我无法强调这一点）。问候语和其他琐事只是不必要的。通过尽力揭示问题并削减冗余，您增加了找到帮助的机会。（这是您在SO上的第一个问题，所以我想给一些指针。） - royhowie

谢谢...我之前尝试过$('this')而不是$(this)。语法很重要！ - Zarley

感谢 @royhowie 的指针。 - Zarley

Answer 1

Use this to target clicked li , li will target all the li

$(document).ready(function() {
  $('#lili>li').click(function() {
    $(this).css('background-color', 'yellow');
    //-^-----
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>INGREDIENTS</h3>
<ul id="lili">
  <li>3 Tbsp soy sauce</li>
  <li>1 teaspoon brown sugar</li>
  <li>1 Tbsp olive oil</li>
  <li>2/3 cup diced red onion</li>
  <li>2/3 cup diced red bell pepper</li>
  <li>2 cloves garlic, minced</li>
  <li>1-inch piece of ginger, grated</li>
  <li>3 eggs, well beaten</li>
  <li>4 cups day old cooked white rice (from about 2 cups of raw rice)</li>
  <li>1 cup frozen peas, thawed</li>
  <li>2 cups cooked salmon in large chunks</li>
  <li>2 green onions, thinly sliced, including the greens</li>
  <li>Cilantro (or parsley) for garnish</li>

</ul>

如果您想切换效果，请使用以下内容：

$(document).ready(function() {
  $('#lili>li').click(function() {
    $(this).toggleClass('toggle');
  });
});

.toggle {
  background-color: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>INGREDIENTS</h3>
<ul id="lili">
  <li>3 Tbsp soy sauce</li>
  <li>1 teaspoon brown sugar</li>
  <li>1 Tbsp olive oil</li>
  <li>2/3 cup diced red onion</li>
  <li>2/3 cup diced red bell pepper</li>
  <li>2 cloves garlic, minced</li>
  <li>1-inch piece of ginger, grated</li>
  <li>3 eggs, well beaten</li>
  <li>4 cups day old cooked white rice (from about 2 cups of raw rice)</li>
  <li>1 cup frozen peas, thawed</li>
  <li>2 cups cooked salmon in large chunks</li>
  <li>2 green onions, thinly sliced, including the greens</li>
  <li>Cilantro (or parsley) for garnish</li>

</ul>

- Pranav C Balan

Answer 2

你需要更改偶数源的CSS，而不是所有li元素的CSS。

$(this).css('background-color','yellow');

您也可以使用原生方法设置背景颜色，这样会比之前的方法更快。

this.style.backgroundColor = 'yellow';

- Adil

Answer 3

只需使用this，因为它指的是当前点击的元素。

  $(this).css('background-color','yellow');

- Norlihazmey Ghazali