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代替$(".ajlsst-wrap").click

您可以使用简单的下一个代码

$(".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>

Answer 2

这样做

＆＃13;

＆＃13;

randomFromStable + 0.05 * randomFromDifference

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望你能得到这个概念。