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

哪个只适用于一个div，我的div是由WordPress生成的，所以我尝试为每个设置一个不同的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");
});

Jquery谷歌地图方向

1 个答案: