javascript - Jquery，隐藏和关闭一个元素内的元素

Question

我正在开发一个网络应用程序，但遇到了问题。问题是，我有一个 span 元素，在该 span 元素内还有两个 span 元素。简而言之，父级 span 元素的两个子级。其中一个子元素显示在父元素中，当有人单击显示的子元素时，它将获取该子元素的索引值并将其隐藏，并显示下一个兄弟元素。我已经编写了一些代码，但它只需单击一次即可工作，当我单击显示的下一个同级时，第一个同级将永远不会显示。下面是我的代码:

HTML

<span class="ajlsst-wrap">

  <span class="ajls-save-sec ajls-save">
    <i class="fa fa-bookmark-o"></i>
    <span class="ajls-labe">Save</span>
  </span>

  <span class="ajls-save-sec ajls-saved">
    <i class="fa fa-check"></i>
    <span class="ajls-labe">Saved</span>
  </span>

</span>

$(".ajlsst-wrap").click(function(){

    var _index = $(this).find(".ajls-save-sec").index();

    console.log(_index);



   if(_index == 0){
        $(this).find(".ajls-save").hide();
        $(this).find(".ajls-saved").show();
    }
    else{
        $(this).find(".ajls-saved").hide();
        $(this).find(".ajls-save").show();
    }
    
   
})

I also have a problem , that is, the index of first child is always detect not of the second one which is shown on click, i don`t know why.

Answer 1

这样做

$(".ajls-save-sec").click(function(){
  
  $(this).hide().siblings().show()    
   
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="ajlsst-wrap">

  <span class="ajls-save-sec ajls-save">
    <i class="fa fa-bookmark-o"></i>
    <span class="ajls-labe">Save</span>
  </span>

  <span class="ajls-save-sec ajls-saved" style="display:none">
    <i class="fa fa-check"></i>
    <span class="ajls-labe">Saved</span>
  </span>

</span>

希望你能理解这个概念。