时间戳

首页 > 解决方案 > 如何在附加部分中的轮播中获取图像的 src

javascript - 如何在附加部分中的轮播中获取图像的 src

问题描述

我正在尝试获取附加部分中的轮播 img 的 src，以从 firebase 数据库中动态获取 src。我可以在轮播中显示图像。但我想在 comsole 中获取活动图像 src。这是我的附加部分和我的 JavaScript 代码：

sliderUp.on("child_added", snap => { //get all slide from Firebase

    var image = snap.child("imageName").val();
    if(parseInt(snap.key) == 1) {
    var imageName = '<div class="item active">'   //active image section
         + '<img src="images/' + image + '"alt="...">'
         + '<div class="carousel-caption">...</div>'
         + '</div>';
    } else {
    var imageName = '<div class="item">'   //image section
        + '<img src="images/' + image + '"alt="...">'
        + '<div class="carousel-caption">...</div>'
        + '</div>';
    }
    $("#sliderShow").append(imageName);
});

  var activeElImgSrc = document.querySelector('.item.active > img').getAttribute('src');
  console.log(activeElImgSrc);

现在我包括了我的 html 部分。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ltd</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" media="screen" href="css/style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;900&display=swap" rel="stylesheet"> 
</head>
<body>

  <div id="main-content" class="container-fluid">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-height: 600px; overflow: hidden;">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox" id="sliderShow">
      <!--Show all the slide here-->
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</body>
</html>

请帮忙，我该怎么办？

标签： javascripthtmljquerycsstwitter-bootstrap

解决方案

推荐阅读