Question

我的页面上有一个封面流程部分，封面图像的移动由与Javascript链接的左右按钮控制。每当封面图像移动到中心时，就会将active类添加到该图像的类列表中，并从之前的图像中删除。我还有一个简单的jquery，我想检测该当前活动封面图像的alt文本。我在左右按钮上实现了onClick事件侦听器。每当单击按钮时，就会触发jquery。问题是，当我单击按钮时，它确实检测到具有alt类的当前居中图像的active文本，而仅在出现以下情况时才检测到中心图像的alt文本页面首次加载。

HTML如下：

<div class="coverflow">
    <div class="cover active"><img src="..." alt="A"></div>
    <div class="cover"><img src="..." alt="B"></div>
    ...
    <div class="cover"><img src="..." alt="Y"></div>
    <div class="cover"><img src="..." alt="Z"></div>
</div>
<button class="left" onclick="getAlt();">Left</button>
<button class="right" onclick="getAlt();">Right</button>

JQuery如下：

<script>
function getAlt() {
    var alt = $('.cover,.active').find('img').attr('alt');
    alert($alt);
}
</script>

在上述情况下，无论屏幕上居中显示哪个图像，警报框始终显示“ A”而不是其他替代文字。我的例外结果应该是使警报框在图像旋转时动态显示中心活动图像的alt文本。当我上面的样本时，有人知道哪里出了问题吗？

Answer 1

您使用了错误的选择器。 $('.cover,.active')将返回所有具有类cover或active的元素。您应该改用$('.cover.active')。

Answer 2

基本上，您应该可以使用以下方法获取当前alt的值：

$('.active img').attr('alt');

以下演示演示了可能的滑块如何利用alt值作为当前<img>的标题。

BTW从不使用事件属性（例如<div onclick=functionName()...>）如果您加载jQuery是因为jQuery事件方法（例如$('div').click(functionName)或$('div').on('click', functionName)）用途广泛，并且易于维护-事件属性不是。

$('.active').fadeIn();
$('.active .text').text($('.active img').attr('alt'));

$('.go').on('click', cover);

function cover(e) {
  var idx = $('.active').index();
  var prev = idx;
  var last = $('.cover').length - 1;
  var dir = $(this).hasClass('right') ? idx + 1 : idx - 1;
  if (dir < 0) {
    dir = last;
  }
  if (dir > last) {
    dir = 0;
  }
  $('.cover').each(function(i) {
    if (dir === i) {
      $(this).fadeIn().addClass('active');
    } else if (i === prev) {
      $(this).fadeOut().removeClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
  var alt = $('.active img').attr('alt');
  console.log(alt);
  $('.active .text').text(alt);
}

.coverflow {
  height: 250px;
  overflow: hidden;
}

.cover {
  display: none;
}

button {
  font-size: 3rem;
  background: none;
  border: 0;
  cursor: pointer;
  transform: translateY(125px)
}

button:focus {
  outline: none
}

.left {
  float: left
}

.right {
  float: right
}

.text {
  text-align: center;
  font-size: 3rem
}


/* For demo purposes */

.as-console-wrapper {
  max-height: 25px !important;
  max-width: 30%;
  margin-left: 70%
}

<button class="go left">&#9664;</button>
<button class="go right">&#9654;</button>
<section class="coverflow">
  <figure class="cover active"><img src="https://cdn.pixabay.com/photo/2018/06/26/11/35/letter-3499237_960_720.png" alt="A" width='320' height='180'>
    <figcaption class='text'></figcaption>
  </figure>

  <figure class="cover"><img src="https://cdn.pixabay.com/photo/2019/01/05/21/27/letter-3915960_960_720.png" alt="B" width='320' height='180'>
    <figcaption class='text'></figcaption>
  </figure>

  <figure class="cover"><img src="https://cdn.pixabay.com/photo/2017/02/03/08/27/alphabet-2034721_960_720.png" alt="Y" width='320' height='180'>
    <figcaption class='text'></figcaption>
  </figure>

  <figure class="cover"><img src="https://cdn.pixabay.com/photo/2017/01/26/14/30/alphabet-2010699_960_720.png" alt="Z" width='320' height='180'>
    <figcaption class='text'></figcaption>
  </figure>
</section>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用动态类列表动态检测图像的替代文本

2 个答案: