jQuery를 구글지도 방향

Question

는 사용자가 자신의 우편 번호를 입력 내 원래의 코드는 하나의 div 작동

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

하고있는 지정된 우편 번호에 방향을 얻을 수있는, 내 div의 워드 프레스에 의해 생성되는하기 그래서 각각 다른 ID를 설정하고 jquery를 사용하여 각 하나에 대한 가치를 얻을 수 있지만 몇 가지 이유가 작동하지 않는 이유는 여기에 여러 divs 내 코드를 볼 수 없습니다.

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