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

我也有一个问题，就是第一个孩子的索引总是检测不到第二个点击显示的，我不知道为什么。

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>

希望你明白这个概念。

Answer 2

你可以直接用$(".ajls-save-sec").click代替$(".ajlsst-wrap").click

你可以使用简单的next代码

$(".ajls-save-sec").click(function(){  // no need for $(".ajlsst-wrap")
    $(this).parent().find(".ajls-save-sec").show();  // show all spans
    $(this).hide();    // hide the clicked one
})

.ajls-saved{
  display : none;
}

<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">
    <i class="fa fa-check"></i>
    <span class="ajls-labe">Saved</span>
  </span>

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