我怎樣才能顯示和隱藏多個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> 

首先，每個塊不能有相同的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");
});

這是你想要的？

Answer 2

試試下面的代碼

 $('li').on('click', function() { $(this).find('.fa-plus-circle').show(); $(this).find('.fa-check').hide(); }); 

 span.fa-plus-circle {display:none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <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 3

您不能為多個html元素設置相同的id 。因此，請為每個元素設置類名稱。

 <span id="add_skill" class="fa fa-plus-circle add_skill_class"></span>
  <span id="add_icon" class="fa fa-check add_icon_class"></span>

 $('#skill-job-list').on('click', function(){
      $(this).find('.add_skill_class').hide();
      $(this).find('.add_icon_class').show();
  });

Answer 4

 $(document).ready(function(){ $(".fa-plus-circle").hide(); $(".fa-check").hide(); $('li').on("click",function(){ var index = $(this).index(); $(".fa-plus-circle:eq("+index+")").toggle(); $(".fa-check:eq("+index+")").toggle(); }); }); 

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <ul> <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">add_skill 1</span> <span id="add_icon" class="fa fa-check">add_icon 1</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">add_skill 2</span> <span id="add_icon" class="fa fa-check">add_icon 2</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"> add_skill 3</span> <span id="add_icon" class="fa fa-check"> add_icon 3</span> </div> </li> </ul>