jquery - 尝试选择最接近按钮的图像，但 Jquery 返回未定义

Question

以下是包含我尝试选择的数据的按钮。基本上我想获取与单击的按钮相对应的图像的源属性。

<div class="row">
               <!-- Available car 1 start -->
              <div class="col-md-12 available_car">
                <div class="col-md-2 col-sm-2 col-xs-4 available_car_img">
                  <img src="http://www.sweetheartmotors.ca/sites/default/files/audi_PNG1736.png" style="width: 100px; height:100px;">
                  <p>Car Name 1</p>
                  <p> 5 Seater </p>
                </div>
                <div class="col-md-3 available_car_info col-xs-8">
                  <div class="features col-md-12 pull-left ">
                      <p class="features-header">Car Features</p>
                      <P><span class="glyphicon glyphicon-asterisk"></span>Air conditioning</p>
                      <p><span class="glyphicon glyphicon-text-color"></span>Automatic</p>
                      <p><span class="glyphicon glyphicon-briefcase"></span>3 Bags</p>
                  </div>
                </div>
                <div class="available_car_prices col-xs-12 col-md-7" style="padding-top: 15px;">
                  <div class="price-box price-box-left col-sm-3">
                    <h4 class="price-heading">Rental price</h4>
                    <h4 class="price-amount">$143.00</h4>
                  </div>
                  <div class="price-box price-box-middle col-sm-5">
                    <h4 class="price-heading">Total Price</h4>
                    <h4 class="price-amount">$143.00</h4>
                  </div>
                  <div class="price-box price-box-right col-sm-3">
                    <h4 class="price-heading">Free Milage</h4>
                    <h4 class="price-amount">$143.00</h4>
                  </div>
                <button type="button" data-toggle="modal" data-target="#pickCarModal" class="btn btn-primary pull-right pick-car-btn">Pick Car</button>
              </div>
            </div>
          </div>
             <!-- Available car 1 end -->

              <div class="row">
              <!-- Available car 2 start -->
              <div class="col-md-12 available_car">
                <div class="col-md-2 col-sm-2 col-xs-4 available_car_img">
                  <img src="http://www.showroominfo.in/wp-content/uploads/2014/11/skoda-car.jpg" style="width: 100px; height:100px;">
                  <p>Car Name 2</p>
                  <p> 5 Seater </p>
                </div>
                <div class="col-md-3 available_car_info col-xs-8">
                  <div class="features col-md-12 pull-left ">
                      <p class="features-header">Car Features</p>
                      <P><span class="glyphicon glyphicon-asterisk"></span>Air conditioning</p>
                      <p><span class="glyphicon glyphicon-text-color"></span>Automatic</p>
                      <p><span class="glyphicon glyphicon-briefcase"></span>3 Bags</p>
                  </div>
                </div>
                <div class="available_car_prices col-xs-12 col-md-7" style="padding-top: 15px;">
                  <div class="price-box price-box-left col-sm-3">
                    <h4 class="price-heading">Rental price</h4>
                    <h4 class="price-amount">$143.00</h4>
                  </div>
                  <div class="price-box price-box-middle col-sm-5">
                    <h4 class="price-heading">Total Price</h4>
                    <h4 class="price-amount">$143.00</h4>
                  </div>
                  <div class="price-box price-box-right col-sm-3">
                    <h4 class="price-heading">Free Milage</h4>
                    <h4 class="price-amount">$143.00</h4>
                  </div>
                <button type="button" data-toggle="modal" data-target="#pickCarModal" class="btn btn-primary pull-right pick-car-btn">Pick Car</button>
              </div>
            </div>
          </div>

这是我现在拥有的 JQuery 代码。我是 JQuery 遍历的新手，所以请让我知道错误在哪里以及如何修复它。谢谢

$(".pick-car-btn").click(function(){

  var imageSource = $(this).closest("div.available_car_img").find("img").prop("src");
  console.log(imageSource);

});

Answer 1

您需要使用.closest("div.available_car")

var imageSource = $(this).closest("div.available_car").find("div.available_car_img > img").attr("src");