我正在开发一个网络应用程序,但遇到了问题。问题是,我有一个 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.
最佳答案
这样做
$(".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>
希望你能理解这个概念。
关于javascript - Jquery,隐藏和关闭一个元素内的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48026252/