Question

以下是包含我要选择的数据的按钮。基本上我想获得与单击按钮对应的Image的source属性。

<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");

Answer 2

你可以这样做。因为你发现.closest()的孩子div找不到任何东西。

FIDDLE

$(".pick-car-btn").click(function(){
  var imageSource = $(this).closest("div.available_car").find("div.available_car_img > img").attr("src");
  console.log(imageSource);
  alert(imageSource);
});

Answer 3

在设置上下文之前，我不会使用$（this）关键字 - 因为在您的代码中，＆＃34; this＆＃34;关键字是指按下的按钮。根据你的代码，你从按钮上升到divlavailable_car_img，然后回到img。

相反，只需使用数据目标信息转到ID为

的元素即可

$(".pick-car-btn").click(function(){
    var $targetParent = $(this).data("target"); // grabs string value
    $parentTarget = $($imageTarget); // creates jQuery object referencing that element with that id // this assumes 
    /* from here, go down with find the img, assuming only one is within the parentTarget */
    var $imageSource = $parentTarget.find('img');
    $imageSource = $imageSource.prop('src');
    console.log($imageSource);
});

您从按钮开始定位data-target =＆＃34; #pickCarModal，但我没有看到id =＆＃34; pickCarModal＆＃34;在你的代码中。

这实际上取决于HTML上的结构。 .closest（）给父母起泡 .find（）通过后代下载

尝试选择最接近按钮的图像，但Jquery返回Undefined

3 个答案: