Question

在我的WordPress网站上，我正在编写一个带有世界地图的插件，该地图根据使用AJAX点击的区域加载特定帖子。我想在主导航中包含指向已经显示区域帖子的地图页面的链接（例如：标题为“中东”的链接会将用户引导到已显示中东帖子的地图页面）。我正在尝试使用location.hash，但我不完全理解它是如何工作的。这是我的代码：

start.js：

jQuery(document).ready(function() {

    // Added code based on jetlej's answer
    jQuery('#vmap').ready( function(event, code, region) {
        $.ajax(get_data.ajaxurl, {
            data: {region: region, 'action': 'get_post_data'},
            dataType: 'json',
                success: function(response) {
                    $("#post").html(response);
                    location.hash = region;
                }
        });
    });

    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#fff',
        // more map config options...
        onRegionClick: function(element, code, region)
        {
            if (location.hash) {
                location.hash.replace("#","")+".html"
            }

            $.ajax(get_data.ajaxurl, {
                data: {region: region, 'action': 'get_post_data'},
                dataType: 'json',
                    success: function(response) {
                        $("#post").html(response);
                        location.hash = region;
                }
            });

        }  
    });
});

的index.php：

class Post{
    function get_post( $ID ){
        $html = '';
        $post = get_post( $ID );
        if( $post ) {
            $html = $post->post_title;
            $html .= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
            $html .= $post->post_content;
        }
        return $html;
    }
}

function get_post_data(){

    $post = new Post();
    $result = '';

      // Swtich based on region
      switch($_REQUEST['region']) {
        //Europe
        case 'Russia':
        case 'Albania':
            $result = $post->get_post( 405 );
          break;

        //Africa
        case 'Congo':
        case 'Nigeria':
            $result = $post->get_post( 388 );
          break;

      echo json_encode($result);
      die();
}

add_action('wp_ajax_get_post_data', 'get_post_data');
add_action('wp_ajax_nopriv_get_post_data', 'get_post_data');

我的链接看起来像这样：

<a href="http://example.com/where-we-serve/#Russia">Europe</a>

当我点击链接时，它会将我带到地图页面，但它处于默认状态，没有显示任何帖子。当我点击地图时，我在URL中获取哈希值，但它们似乎实际上对页面状态没有任何影响。这是一个问题，我如何使用location.hash，链接的问题，或者这只是错误的方法？

Answer 1

您似乎没有检查每个页面加载的哈希值。您只检查是否点击了地图。

要让地图通过哈希显示区域，您只需使用地图插件的内置“选择区域”即可。参数。

EG。

    jQuery(document).ready(function() {

        region = null;
        // If there is a hash, then grab it and update the page to reflect that region
        if(location.hash){

            // Remove the '#' from the hash
            region = location.hash.split('#')[1];

            // Update #post with the region post info
            $.ajax(get_data.ajaxurl, {
                data: {region: region, 'action': 'get_post_data'},
                dataType: 'json',
                success: function(response) {
                    $("#post").html(response);
                }
            });    

        }

        jQuery('#vmap').vectorMap({
            map: 'world_en',
            backgroundColor: '#fff',
            // Set the pre-selected to region to that hash, or null if there is no hash
            selectedRegion: region,
            onRegionClick: function(element, code, region){
                if (location.hash) {
                    location.hash.replace("#","")+".html"
                }

                $.ajax(get_data.ajaxurl, {
                    data: {region: region, 'action': 'get_post_data'},
                    dataType: 'json',
                    success: function(response) {
                        $("#post").html(response);
                        location.hash = region;
                    }
                });
            }  
        });
    });

链接到WordPress页面上的特定AJAX数据

1 个答案: