jquery - 单击时显示同级

Question

我正在尝试显示隐藏的 <i>当我点击第一个的时候。我尝试阅读有关此内容并尝试了 siblings() 的不同变体等等，但我无法让它工作。有人可以解释一下我应该做什么吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="locationactions">
  <i class="fas fa-trash-alt"></i>
  <i class="fas fa-check" style="display: none;"></i>
</div>

$('.adminapp .locationactions i').click(function() {
  if (currentApp != "adminapp") 
    return;

  $(this).closest('i').show(150);
});

Answer 1

问题是因为 closest() 查找最近的父元素，而您想要定位的 i 是同级元素。因此，请使用 siblings('i') 或 next('i'):

var currentApp = 'adminapp';

$('.adminapp .locationactions i').click(function() {
  if (currentApp != "adminapp")
    return;

  $(this).next('i').show(150); // looks at the following sibling element ONLY
  // Alternative:
  // $(this).siblings('i').show(150); // looks at ALL siblings
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="adminapp">
  <div class="locationactions">
    <i class="fas fa-trash-alt">fa-trash-alt</i>
    <i class="fas fa-check" style="display: none;">fa-check</i>
  </div>
</div>