我的js

Question

所以我在另一个页面（待售）上有一个表单，该表单在此页面的顶部显示了我的所有属性，还有一个用于过滤的表单。过滤器内部的输入之一允许您键入区域并检查该区域中的属性。

现在，我还在页脚中创建了一个循环，该循环显示了我当前拥有属性的所有区域。当用户单击这些区域之一时，我会存储此链接的值，然后重定向到待售页面。现在，这变得很复杂，我想检测此待售页面是否已加载，然后一旦完成，我想将链接值放入表单内的输入中，然后提交。

但是现在，发生的是在页面加载之前，值试图注入到输入中。因此，在页面加载之前，我需要暂停代码。这可能吗，还是我需要另辟about径？

到目前为止，这是我的代码，我没有添加表单提交，因为目前没有意义，因为它不起作用。

我的js

<script>
    jQuery(document).ready(function($){
        $('.ft_town').click(function(e){
            e.preventDefault();
            var area = $(this).html();

            window.location.href = "http://mydomain.co.uk/for-sale/";

            $('#location_search').val(area);
        });
    });
</script>

待售页面表格

<form action="" method="GET" id="filters">
    <div id="top_bar">
        <input id="location_search" type="text" placeholder="Enter a search location" name="location">
    </div>
    <button id="button" type="submit" style="display: none;">Apply filters</button>
    <input type="hidden" name="action" value="forsalefilter">
</form>

获得属性区域的页脚代码

<div class="col-md-6">
    <h3>Properties available in</h3>
    <div class="row">
        <?php 
            $args = array(
                'post_type'         => 'property',
                'posts_per_page'    => -1,
                'meta_key'          => 'property_status',
                'meta_value'        => 'For Sale'
            );

            $query = new WP_Query($args);
        ?>

        <?php if( $query->have_posts() ): ?>
            <?php while( $query->have_posts() ): $query->the_post(); ?>
                <?php $town_array[] = get_field('town'); ?>
            <?php endwhile; ?>

            <?php 
                wp_reset_query();

                $towns = array_unique($town_array);//removes duplicates
                $towns = array_values($towns);//re-indexs values after dups have been removed

                for($i = 0; $i < count($towns); $i++){
                    echo "<div class='col-md-6'><ul><li><a class='ft_town' href='javascript:;'>".$towns[$i]."</a></li></ul></div>";
                }
            ?>

        <?php endif; ?>
    </div>

Answer 1

这不是Javascript的工作方式。它只会影响当前加载的DOM。您无法进行页面传输，也无法在上一个JS内修改新的DOM。

要实现所需的功能，需要将值发送到新页面，然后在新页面上使用它。您可以使用Cookie，查询字符串，服务器端会话（通过AJAX）或local / sessionStorage来实现。到目前为止，后者是最简单的，因此这里是一个使用它的示例：

首先，在页脚中添加用于在localStorage中设置值的JS：

jQuery(function($){
  $('.ft_town').click(function(e){
    e.preventDefault();
    localStorage.setItem('area', $(this).text());
    window.location.assign('http://mydomain.co.uk/for-sale/');
  });
});

然后在表单页面中，您可以从localStorage中读取该值-假设已设置以下值：

jQuery(function($) {
  var area = localStorage.getItem('area');
  if (area) {
    $('#location_search').val(area);
    localStorage.removeItem('area'); // optionally remove the item if you want single usage
  }
});

重定向页面并检测其是否已加载

我的js

待售页面表格

获得属性区域的页脚代码

1 个答案: