Question

我想获得图像的路径。我使用了closest和find方法，但日志显示为undefined。我怎样才能得到这条路？我正在使用$(this)关键字，因为我想获取所选选项的路径。

    <section class="regular slider">
    <?php 
    foreach($todays_offers as $offer){ 
    ?>
    <div class="product-container col-xs-12" >
    <div class="product-left">
    <div class="product-thumb">
    <a class="product-img detail" href="#" > 
     >
     <img  src='<?php echo base_url("images/$image")?> ' alt="<?php echo $product_name?>" ></a>
    </div>
    </div>
    <div class="half">
    <div class="product-right">
    <div class="product-brand ">
    <?php echo ucfirst($brand); ?>
    </div>
    <div class="product-name " style="height: 40px;
     overflow: hidden;line-height:17px;">
    <a href="#"><?php echo $product_name ?></a>
    </div>
    <?php
            $sql ="SELECT * FROM materials where product_name='".$product_name."' ORDER BY retail_price ASC";

            $query1 = $this->db->query($sql);
            $rowCount="SELECT * FROM materials where product_name='$product_name'";
            $query2 = $this->db->query($rowCount);
            if (!empty($query1)) {
            if ($query2->num_rows() > 1) {
            echo "<select name='netweight' class='netweight' >";    
            foreach ($query1->result() as $row) {
                $net = $row->packing;
                $retail = $row->retail_price; 
                $image = $row->image;  
                ?>
            <option id="<?php echo $row->id;?>" value="<?php echo $net;?>" data-retial="<?php echo $retail ?>" data-image='<?php echo base_url("images/$image") ?>''><?php echo $net .' - Rs.'. $retail  ?>


            </option>
            <?php }
            echo "</select>";
            }
            else
            {
                $net_weight=$offer->packing;
                echo "<span>$net_weight</span>";
            }
        }

            ?>

        <div class="price-box">
        <span class="product-price"> <i class="fa fa-inr" aria-hidden="true"></i> <?php echo   $our_price ?></span>
        <?php 
        if($our_price<$price)
        { ?>
        <span class="product-price-old">MRP <i class="fa fa-inr" aria-hidden="true"></i><?php echo  $price ?></span>
        <?php } ?>
        </div>  
        <div class="col-sm-6 col-xs-4 pad-0">

    <div qa="qty" class="input-group"><span class="input-group-addon">Qty</span> 
    <input type="text" class="form-control quantity" value="1" maxlength="2" name="quantity" id="<?php echo  $product_id ?>"></div>
     </div>
    <div class="col-sm-6 col-xs-6 pad-0">
    <div class="product-button">
    <?php if($pro_quantity>0){    ?>        
    <a class="btn btn-danger add_cart" type="button" title="Add to Cart" name="add_cart"  style="font-size:12px;width:100%;"  data-netweight="<?php echo $net_weight ?>" data-image="<?php echo $image ?>" data-productname= "<?php echo $product_name ?>" data-price="<?php echo $our_price?>" data-productid="<?php echo $product_id ?>"
 >ADD <span class="fa fa-shopping-basket"></span></a>
<?php }else{                                                                                    echo "<span class='label label-danger'>Out of stock</span>";   

}    
                                                                                ?>

            </div>
        </div>
    </div>
 </div>
</div>
<?php }?>                           
</section>
</div>

的JavaScript

<script>
$(document).ready(function(){ 
    $(".netweight").change(function(){
        var net = $("option:selected",this).val();
        var id = $("option:selected",this).attr('id');
        var retail = $("option:selected",this).attr('data-retial');
        var image = $("option:selected",this).attr('data-image');           
        var path=$(this).closest('section.regular').find('img').attr('src');
        console.log(path);  

        $(this).parent().find('.product-price').text(retail); 
        $(this).parent().find('a').attr('data-netweight',net);
        $(this).parent().find('a').attr('data-price',retail);  
        $(this).parent().find('a').attr('data-productid',id);
});
</script>

以下是选择下拉列表的示例图像。如果我们选择dro-down netweight，它会触发JavaScript事件

Answer 1

.product-thumb不是.netweight元素的父元素（在遍历DOM树中的祖先时）。您需要遍历到最近的.product-container，然后在其中找到img标记：

$(".netweight").change(function(){
   var path=$(this).closest('.product-container').find('img').attr('src');
   console.log(path); 
});

$(".netweight").change(function(){
   var path=$(this).closest('section.regular').find('img').attr('src');
   console.log(path); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block-inner">
<section class="regular slider">
  <div class="product-container">
       <div class="product-left">
            <div class="product-thumb">
                 <a class="product-img detail"><img src='http://google.com/abc.png '> 
                </a>
            </div>
      </div>
  </div>
  <select name='netweight' class='netweight' >
     <option value="1" id="1">1</option>
      <option value="2" id="2">2</option>
  </select>
  <div class="name"><?php echo name?>  </div>
  <div class="price"><?php echo price?>  </div>
  <div class="price"><?php echo brand?>  </div>
</section>
</div>

Answer 2

注意： - 根据closest()： -

给定一个表示一组DOM元素的jQuery对象，.closest（）方法 在DOM树中搜索这些元素及其祖先 并构造一个新的来自匹配元素的jQuery对象。

但在您的情况下，.product-thumb不是.netweight元素的祖先元素。

您可以执行以下操作： -

$(this).closest('.block-inner').find('img').attr('src');

演示示例： -

＆＃13;

$(document).ready(function(){ 
  $(".netweight").change(function(){
   var path=$(this).closest('.block-inner').find('img').attr('src');
   console.log(path); 
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-inner">
<section class="regular slider">
  <div class="product-container">
       <div class="product-left">
            <div class="product-thumb">
                 <a class="product-img detail"><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxofJbEzZjeldI2K5CsG4HjPH8BDlpWUNwVYhuDXUIAM0IMbQjTg'> 
                </a>
            </div>
      </div>
  </div>
  <select name='netweight' class='netweight' >
     <option value="1" id="1">1</option>
      <option value="2" id="2">2</option>
  </select>
  <div class="name"><?php echo name?>  </div>
  <div class="price"><?php echo price?>  </div>
  <div class="price"><?php echo brand?>  </div>
</section>
</div>

＆＃13;

Answer 3

我认为你应该回到父母那里，然后检查img：

$(".netweight").change(function(){
   var path=$(this).parent().find('img').attr('src');
   console.log(path); 
});

演示：

$(".netweight").change(function(){
   var path=$(this).parent().find('img').attr('src');
   console.log(path); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-inner">
                <section class="regular slider">
                    <div class="product-container">
                         <div class="product-left">
                              <div class="product-thumb">
                                   <a class="product-img detail"><img src='WWW.SRCFOUND.COM'> 
                                  </a>
                              </div>
                        </div>
                    </div>
                    <select name='netweight' class='netweight' >
                       <option value="<?php echo $value ?>" id="OPTION1">OPTION 1</option>
                       <option value="<?php echo $value ?>" id="OPTION2">OPTION 2</option>
                    </select>
                    <div class="name">NAME  </div>
                    <div class="price">PRICE  </div>
                    <div class="price">BRAND  </div>
                </section>
            </div>

Answer 4

只需替换以下行

var path=$(this).closest('.slider').find('img').attr('src');

Answer 5

您可以使用以下内容：

    $(document).ready(function(){ 
            $(".netweight").change(function(){
             var path= $(this).next('a').find('img').attr('src');      
             console.log(path); 
    });

Answer 6

var path = $（＆＃39; .product-thumb＆＃39;）。find（＆＃39; img＆＃39;）。attr（＆＃39; src＆＃39;）;

如何在jQuery中找到最接近的图像src路径

6 个答案: