Question

我想在项目中选择使用jQuery点击的特定li。当我点击一个li时，它会选择所有li's。这是我的小提琴。我只是个初学者。我尝试使用parent（），但它无法正常工作。 JS FIDDLE

这是我的HTML：

＆＃13;

var clicks = 0;
$("li").on("click", function () {
  clicks++;
  $('.top-right').html(clicks);
});

＆＃13;

.list li {
  list-style-type: none;
  display: inline-block;
  background-color: white;
  margin-right: 7px;
}

.list {
  margin: 5px;
}

.list li a {
  text-decoration: none;
  color: black;
  padding: 2px;
}

.list li a:hover,
.list li a:hover {
  color: black;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Exam</title>
</head>

<body>
  <div class="list">
    <ul>
      <li>
        <a href="#">NAME
          <span class="line"></span> AWONUSI OLAJIDE</a>
        <span class="top-right"></span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> ADEGBULUGBE TIMILEHIN</a>
        <span class="top-right"></span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> OLUOLU ADEDEJI</a>
        <span class="top-right">9999</span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> OYAJE JOSHUA</a>
        <span class="top-right">9999</span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> ALABI OJO ADE</a>
        <span class="top-right">9999</span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> AKILO AWANI</a>
        <span class="top-right">9999</span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> AYUBA DEJIMARK</a>
        <span class="top-right">9999</span>
      </li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</body>

</html>

＆＃13;

Answer 1

您需要使用.find()来获取所单击元素中的元素。此外，您需要显示的值比其中已存在的值多一个。

$("li").on("click", function() {
  $(this).find('.top-right').html(function(){
    return +$(this).html() + 1
  });
});

$("li").on("click", function() {
  $(this).find('.top-right').html(function(){
    return +$(this).html() + 1
  });
});

.list li {
  list-style-type: none;
  display: inline-block;
  background-color: white;
  margin-right: 7px;
}

.list {
  margin: 5px;
}

.list li a {
  text-decoration: none;
  color: black;
  padding: 2px;
}

.list li a:hover,
.list li a:hover {
  color: black;
}

<!DOCTYPE html>
<html>

<head>
  <title>Exam</title>
</head>

<body>
  <div class="list">
    <ul>
      <li><a href="#">NAME   <span class="line"></span> AWONUSI OLAJIDE</a><span class="top-right"></span></li>
      <li><a href="#">NAME   <span class="line"></span> ADEGBULUGBE TIMILEHIN</a><span class="top-right"></span></li>
      <li><a href="#">NAME   <span class="line"></span> OLUOLU ADEDEJI</a><span class="top-right">9999</span></li>
      <li><a href="#">NAME   <span class="line"></span> OYAJE JOSHUA</a><span class="top-right">9999</span></li>
      <li><a href="#">NAME   <span class="line"></span> ALABI OJO ADE</a><span class="top-right">9999</span></li>
      <li><a href="#">NAME   <span class="line"></span> AKILO AWANI</a><span class="top-right">9999</span></li>
      <li><a href="#">NAME   <span class="line"></span> AYUBA DEJIMARK</a><span class="top-right">9999</span></li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</body>

</html>

只选择特定的点击

1 个答案: