Bootstrap Carousel - 带标题的链接图像

Question

这是我的第一个轮播项目，我对向图像添加超链接的正确/首选方式有疑问。这是我的项目格式（使用w3school's example）：

<div class="item"><a href="videos/Reports.mp4" target="_blank">
    <img src="graphics/reportsCarousel.png" /></a>
       <a href="videos/Reports.mp4" target="_blank"><div class="carousel-caption">
          <p>Reports</p>
       </div></a>
  </div>

请注意，我将图片和标题都链接了，因为标题 div 造成了死点，因此只有图片的顶部和底部处于活动状态，即可点击。我尝试将标题放在图像中，但不喜欢结果。我还尝试在图像上方和下方移动标题，但没有显示标题。我真的很喜欢它的外观，但想知道是否有更好的方法来设置链接？

额外的功劳：另外，我想知道是否有办法使用当前的 div 设置让两个或三个图像并排显示？当我将第二个图像放入项目 div 时，图像垂直而不是水平显示，即使使用内联 ul。我可以使用更复杂的方法来做到这一点，但如果我可以轻松地调整这个方法，它将为我节省很多时间。

Answer 1

不起作用。使用该代码，您将找到第一个 href。 试试这个：

$(function() {
    $( ".item" ).each(function(index) {
        $(this).on("click", function() {
            console.log('clicked! going to: ' + $(this).find('a').attr('href'));
        });
    });
});

Answer 2

我今天有时间把它放在一起。它似乎工作。

但是，我不确定它是否解决了您的问题，因为缺少 [mcve]，我无法重现您的问题。

我添加了 JS 以将点击事件记录到控制台 - 您在最终版本中可能需要也可能不需要它（同样我不确定您需要什么，因为您提供的代码不完整/无法验证）

请注意

下面的可运行 sn-p 位于框架内，x-frame-options 设置为 SAMEORIGIN，因此链接在此处实际上不起作用（您需要复制/粘贴到您自己的页面中才能看到链接有效)

$(function() {
  $('.item').on('click', function() {
    console.log('clicked! going to: ' + $(this).find('a').attr('href'));

    window.location = $(this).find('a').attr('href');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 1</h3> 
        </div>
      </a>
    </div>

    <div class="item">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 2</h3>

        </div>
      </a>
    </div>

    <div class="item">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 3</h3>

        </div>
      </a>

    </div>

    <div class="item">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 4</h3>
        </div>
      </a>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>