jQuery的谷歌地圖的方向

Question

我試圖讓用戶輸入自己的郵政編碼，它得到指示給定的郵政編碼我原來的代碼是

<div class="map-block"> 
      <img src="<?php the_sub_field('images'); ?>" alt="<?php the_sub_field('shop_title'); ?>" /> 

      <div class="map-bottom"> 
       <h3><?php the_sub_field('shop_title'); ?></h3> 
       <a class="findToggle" href="javascript:void(0)">How to find us</a> 
       <p>Our Address: <?php the_sub_field('address');?></p> 
       <form class="map-form"> 
        <input type="text" class="user-postcode" placeholder="Please enter your postcode"> 
        <a class="btn get_directions" href="javascript:void(0)">Find Us</a>    
       </form>    
      </div> 

     </div> 




    $('.map-block').on('click', '.get_directions', function() { 
      var val = $('.user-postcode').val(); 
      if (val.trim() == '' || val === null) {val = "Enter your location"; } 
      window.open("http://maps.google.com/maps?saddr=" + val + "&daddr=CF23 9AF"); 
    }); 

這對於只有一個格的作品，正在由WordPress的產生我的div所以我嘗試設置一個不同的ID給每個人，然後使用jquery獲得每個人的價值，但由於某種原因，它不工作，我不明白爲什麼這裏是我的多個div的代碼。

<div class="map-block" id="map-<?php echo $i++ ;?>"> 
      <img src="<?php the_sub_field('images'); ?>" alt="<?php the_sub_field('shop_title'); ?>" /> 

      <div class="map-bottom"> 
       <h3><?php the_sub_field('shop_title'); ?></h3> 
       <a class="findToggle" href="javascript:void(0)">How to find us</a> 
       <p>Our Address: <?php the_sub_field('address');?></p> 
       <form class="map-form"> 
        <input type="text" class="user-postcode" placeholder="Please enter your postcode"> 
        <a class="btn get_directions" href="javascript:void(0)">Find Us</a>    
       </form>    
      </div> 

     </div> 




var mapid = $('.map-block').attr('id'); 
    $(' + mapid + ').on('click', '.get_directions', function() { 
      var val = $('.user-postcode').val(); 
      if (val.trim() == '' || val === null) {val = "Enter your location"; } 
      window.open("http://maps.google.com/maps?saddr=" + val + "&daddr=CF23 9AF"); 
    }); 

Answer 1

你只需要找到該郵政編碼的div與$(this)： 「不工作」

$('.map-block').on('click', '.get_directions', function() { 
    var val = $(this).parent().find('.user-postcode').val(); 
    if (val.trim() == '' || val === null) { 
     val = "Enter your location"; 
    } 
    window.open("http://maps.google.com/maps?saddr=" + val + "&daddr=CF23 9AF"); 
});