javascript - 显示/隐藏错误 div 功能检测 I 标记为 div

Question

我正在尝试创建一个<div>在单击<i>标签时显示和隐藏的功能，但是<i>标签本身被检测为 div，因此它会留下一个空白区域并且看起来很糟糕，有人知道如何解决这个问题吗？

function updateItems(tgt, delta) {

  var $items = $(tgt).closest("div").children();
  var $current = $items.filter('.current');
  $current = $current.length ? $current : $items.first();
  var index = $current.index() + delta;

  // Range check the new index
  index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
  $current.removeClass('current');
  $current = $items.eq(index).addClass('current');

  // Hide/show the next/prev
  $(".prev").toggle(!$current.is($items.first()));
  $(".next").toggle(!$current.is($items.last()));
}

$(".next").click(function(e) {
  updateItems(e.target, 1);
});

$(".prev").click(function(e) {
  updateItems(e.target, -1);
});

// Cause initial selection
$(".group").each(function() {
  updateItems(this, 0)
});

.current{
 background-color:#aaa;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/solid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<div class="container-fluid padding adungcontent">
  <div class="row padding">
    <div class="col-lg-4 text-center reveal">
      <img src="img/agunglogo.png" alt="Agung logo" class="img-fluid" alt="Responsive image">
    </div>
    <div class="col-lg-8 text-justify reveal group">
      <div>
        <p>Test
        </p>
      </div>
      <div>
        <h2>Vision</h2>
        <h2>Mission</h2>
      </div>
      <div>
        <h2>Achievements</h2>
      </div>
      <div>
        <h2 class="text-center">Values</h2>
      </div>
      <section>
        <i class="fas fa-angle-right next"></i>
        <i class="fas fa-angle-left prev"></i>
      </section>
    </div>
  </div>
</div>

标签： javascripthtmljquery

Answer 1

问题不在于<i>元素被检测为 div，而是您正在选择父元素<div>，closest()然后选择它的所有子元素children()，其中包括<i>.

function updateItems(tgt, delta) {

  var $items = $(tgt).closest("div").find("div");
  var $current = $items.filter('.current');
  $current = $current.length ? $current : $items.first();
  var index = $current.index() + delta;

  // Range check the new index
  index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
  $current.removeClass('current');
  $current = $items.eq(index).addClass('current');

  // Hide/show the next/prev
  $(".prev").toggle(!$current.is($items.first()));
  $(".next").toggle(!$current.is($items.last()));
}

$(".next").click(function(e) {
  updateItems(e.target, 1);
});

$(".prev").click(function(e) {
  updateItems(e.target, -1);
});

// Cause initial selection
$(".group").each(function() {
  updateItems(this, 0)
});

.current{
 background-color:#aaa;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/solid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<div class="container-fluid padding adungcontent">
  <div class="row padding">
    <div class="col-lg-4 text-center reveal">
      <img src="img/agunglogo.png" alt="Agung logo" class="img-fluid" alt="Responsive image">
    </div>
    <div class="col-lg-8 text-justify reveal group">
      <div>
        <p>Test
        </p>
      </div>
      <div>
        <h2>Vision</h2>
        <h2>Mission</h2>
      </div>
      <div>
        <h2>Achievements</h2>
      </div>
      <div>
        <h2 class="text-center">Values</h2>
      </div>
      <section>
        <i class="fas fa-angle-right next"></i>
        <i class="fas fa-angle-left prev"></i>
      </section>
    </div>
  </div>
</div>