javascript - 我怎样才能使多个显示和隐藏jquery？

Question

我需要编写一个 jQuery 代码，每次单击 <li> 时都会显示该代码。这个跨度 <span id="add_icon" class="fa fa-check"></span>显示，此跨度隐藏 <span id="add_skill" class="fa fa-plus-circle"></span>

这是我的代码:

<ul id="skill-job-list" class="available-skill-list">
  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle"></span>
      <span id="add_icon" class="fa fa-check"></span>
    </div>
  </li>

  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle"></span>
      <span id="add_icon" class="fa fa-check"></span>
    </div>
  </li>
  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle"></span>
      <span id="add_icon" class="fa fa-check"></span>
    </div>
  </li>

</ul>

Answer 1

$(".job_item").on("click", function() {
  $(this).find("span").toggleClass("fa-plus-circle fa-check");
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="skill-job-list" class="available-skill-list">
  <li>
    <div data-job="149" title="Business Plans" class="skill-select-bubble job_item">

      Business Plans (809 jobs)

      <span class="fa fa-plus-circle add_skill"></span>
    </div>
  </li>

  <li>
    <div data-job="149" title="Business Plans" class="skill-select-bubble job_item">

      Business Plans (809 jobs)

      <span class="fa fa-plus-circle add_skill"></span>
    </div>
  </li>
  <li>
    <div data-job="149" title="Business Plans" class="skill-select-bubble job_item">

      Business Plans (809 jobs)

      <span class="fa fa-plus-circle add_skill"></span>
    </div>
  </li>

</ul>

首先，每个 block 不能有相同的 id，因此你的 id“job_item”应该成为一个类“.job_item”，“add_skill”和“add_icon”也是如此，这样你就可以这样做:

$(".job_item").on("click", function() {
    $(this).find(".add_skill").hide();
    $(this).find(".add_icon").show();
});

现在，如果您需要为每次点击更改 hide() 和 show() ，也许您可​​以尝试以下操作:

<span id="add_skill" class="fa fa-plus-circle"></span> // keep one and delete the other span

$(".job_item").on("click", function() {
    $(this).find("span").toggleClass("fa fa-plus-circle fa-check");
});

这是您要找的吗？