Question

每次点击<li>此范围时，我都需要制作一个jQuery代码 <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();
});

现在，如果您需要更改女巫，则每次点击都会隐藏（）和显示（），也许您可以尝试：

<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

＆＃13;

$(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();
  });
      
});

＆＃13;

<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>

＆＃13;

如何进行多次显示和隐藏jquery？

4 个答案: