Question

我对Javascript有点新鲜，但我知道我不应该用我的HTML内联编写我的Javascript，而是从外部文件加载它。我一直试图将它放在外部文件中，但由于我的代码的工作方式，我认为最好将它安排在可以在各个点调用的函数中。这是什么最好的做法？

猜测，我会说我应该将所有JS包装在一个单独的文件中然后用函数调用每个代码片段......但我不完全确定如何做到这一点我不是知识渊博，知道如何提出问题在网上四处看看。

以下是一个示例：

<html>
<script type="text/javascript"> <!--Create the arrays-->
    var locationLat = new Array();
    var locationLong = new Array();
    var postURL = new Array();
    var postExcerpt = new Array();
    var postTitle = new Array();
    var featImg = new Array();

    var i = 0;
</script>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<script type="text/javascript"> <!--Load data from Wordpress into the arrays so we can use them on a map later-->
    locationLat[i] = "<?php echo get_post_meta( get_the_ID(), 'locationLat', true ) ?>";
    locationLong[i] = "<?php echo get_post_meta( get_the_ID(), 'locationLong', true ) ?>";
    postURL[i] = "<?php echo get_permalink( $id );?>";
    postExcerpt[i] = "<?php echo  get_the_excerpt();?>";
    postTitle[i] = "<?php echo get_the_title($ID);?>";
    featImg[i] = "<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>"

    i++;
</script>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<script type="text/javascript">
function initialize() { <!--**I tried putting this function into an external JS file and calling it onLoad with body but it didn't do anythin**g-->
    google.maps.visualRefresh = true;
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(37.09024,-95.712891),
        disableDefaultUI: true,
    };

    var posts = locationLat.length;
    var j = 0;
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    var place = new Array();

        while (posts != j)
        {
            var image = '<?php echo get_template_directory_uri(); ?>/location_marker.png';
            var myLatLng = new google.maps.LatLng(locationLat[j],locationLong[j]);

            place[j] = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                url: postURL[j],
                excerpt: postExcerpt[j],
                title: postTitle[j],
                cover: featImg[j]
            });   

            google.maps.event.addListener(place[j], 'click', function() {
            map.panTo(this.getPosition());
            map.setZoom(8);

            $('#spantext').html(this.title);
            $('#poste').html(this.excerpt);
            $('.fillme').html('<img src="' + this.cover + '">');
            $('.readmore').html('<p><a href="' + this.url + '">Read more ></a>');
            $('.sidebar').show().stop().animate({
                'width' : '400px',
                'opacity' : '1'
            }, 500);
            });
            j++;
        }
} 

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<body>

如果我完全偏离轨道，一些指导会很好。一切都以这种格式工作，但我真的不认为这是正确的。我知道这是一个相对愚蠢的问题，但代替在我认为值得问的任何地方找到一个非常好的答案。

Answer 1

我建议将js的不同piceces放入不同的文件中。用php添加它们。

但是为此，首先将js定制为独立的块，即一块js不应该从另一块中访问变量。

所以它看起来像：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<script type="text/javascript" src="myScript.js"> 
</script>

myScript.js

的内容

<!--Load data from Wordpress into the arrays so we can use them on a map later-->
    locationLat[i] = "<?php echo get_post_meta( get_the_ID(), 'locationLat', true ) ?>";
    locationLong[i] = "<?php echo get_post_meta( get_the_ID(), 'locationLong', true ) ?>";
    postURL[i] = "<?php echo get_permalink( $id );?>";
    postExcerpt[i] = "<?php echo  get_the_excerpt();?>";
    postTitle[i] = "<?php echo get_the_title($ID);?>";
    featImg[i] = "<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>"

    i++;

在代码中调用外部加载的javascript函数

1 个答案: