Question

我尝试在用户在表单中提交其位置后向我的jumbotron附加背景图片。 URL工作正常，但附加的图像永远不会在jumbotron中作为背景结束。我将不胜感激任何帮助。

我的HTML：

<div class="jumbotron">
    <div class="container-fluid text-center ">
    <h3 class="greeting">Where would you like to move?</h1>
    <form id="form-container" class="form-container">
        <label for="street">Street: </label><input type="text" id="street" value="">
        <label for="city">City: </label><input type="text" id="city" value="">
        <p><button class ="btn btn-success btn-md "id="submit-btn">Submit</button></p>
    </form>
</div>

我的CSS：

.jumbotron {
    height: 400px;
}
.bgimg {
    width: 100%;
    opacity: 0.9;
}

我的JavaScript代码：

var street = $("#street").val();

var city = $("#city").val();

var fullLocation = street +", " + city;

var googleUrl = '"https://maps.googleapis.com/maps/api/streetview?size=1000x400&location=' + fullLocation + '"';

$(".jumbotron").append("<img class='bgimg' src=" +googleUrl+ ">");

Answer 1

您关闭<h3> </h1>，但不是很好：

修改了这个：

<h3 class="greeting">Where would you like to move?</h1>

为：

<h3 class="greeting">Where would you like to move?</h3>

验证您是否添加了jQuery库。
您没有附加背景图片，实际上是在附加<img ...。使用on添加preventDefault()点击事件处理程序，它应该可以使用。

如果您想要附加背景图片，您的代码应如下所示：

$(".jumbotron").css('background-image', 'url(' + googleUrl+ ')');

请参阅工作代码段：

＆＃13;

$('.btn').on('click', function(e) {
  e.preventDefault();
  var street = $("#street").val();

  var city = $("#city").val();

  var fullLocation = street +", " + city;

  var googleUrl = '"https://maps.googleapis.com/maps/api/streetview?size=1000x400&location=' + fullLocation + '"';

  $(".jumbotron").append("<img class='bgimg' src=" + googleUrl + ">");
});

＆＃13;

.jumbotron {
  height: 400px;
}
.bgimg {
  width: 100%;
  opacity: 0.9;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron">
  <div class="container-fluid text-center ">
    <h3 class="greeting">Where would you like to move?</h3>
    <form id="form-container" class="form-container">
      <label for="street">Street:</label>
      <input type="text" id="street" value="Wall Street">
      <label for="city">City:</label>
      <input type="text" id="city" value="New York, NY, United States">
      <p>
        <button class="btn btn-success btn-md " id="submit-btn">Submit</button>
      </p>
    </form>
  </div>

＆＃13;

将背景图片附加到Google API的jumbotron类

1 个答案: