如何通过Wordpress中的jquery/css加载动态内容(get、html、data)？

Question

我试图重新编辑我的网站，并将其内容转换为wordpress。我有一个图层滑块，在其中我选择了<div/video>选项来添加一个NowPlaying html div，该div是通过NowPlaying从我的dropbox上的一个外部文件动态加载的。

我使用这个函数将外部文件加载到我的网页中：

<script>
    $(document).ready(function(){
        $.get("https://dl.dropboxusercontent.com/u/27854284/Stuff/Music/Now.Playing.Winamp/nowPlaying_test.html", function(data) {
        $("#nowPlayingInfo").html(data);
        });
    });
    </script>

我复制了以下两个javascript助手文件，这是此内容所必需的。我把这两行复制到主题的标题里.

<script type="text/javascript" src="<?php echo TMM_THEME_URI ?>/js/date.extensions.js"></script>
<script type="text/javascript" src="<?php echo TMM_THEME_URI ?>/js/date.to_relative_time.jquery.js"></script>

这是应该用dropbox文件替换的div：

<div style="">
<p style=""><span style="">Now Playing </span><span style="">Winamp Update: <span class="rel_" id="now_playing_txt">0 minutes ago!</span></span></p>
<p><span id="nowPlayingInfo">Artist - Song Title</span></p>
</div>

dropbox文件包含一些基于文本的代码和html数据：

<script>
date/time functions
</script>

<script>
shuffle enabled/disabled text changer with jquery .text function: ("#shuffle_s").text("Enabled");
</script>

<span>
nowplaying content here...
</span>

基本上都是..。这在这个基于html的版本上工作得很好，但是在wordpress上不起作用.我用xampp和localhost url作为我的wordpress..。

请有人建议将这些内容载入wordpress的方法好吗？谢谢!

编辑：

文本显示正确，但“相对时间帮助者”没有正确显示时间。时间助手由两个脚本组成:正如前面提到的：date.extensions.js和date.to_relative_time.jquery.js。

下面是脚本的源代码：date.extensions.js

/*
 * Returns a description of this past date in relative terms.
 * Example: '3 years ago'
 */
Date.prototype.toRelativeTime = function() {
  var delta       = new Date() - this;
  var units       = null;
  var conversions = {
    millisecond: 1, // ms    -> ms
    second: 1000,   // ms    -> sec
    minute: 60,     // sec   -> min
    hour:   60,     // min   -> hour
    day:    24,     // hour  -> day
    month:  30,     // day   -> month (roughly)
    year:   12      // month -> year
  };

  for(var key in conversions) {
    if(delta < conversions[key]) {
      break;
    } else {
      units = key; // keeps track of the selected key over the iteration
      delta = delta / conversions[key];
    }
  }

  // pluralize a unit when the difference is greater than 1.
  delta = Math.floor(delta);
  if(delta !== 1) { units += "s"; }
  return [delta, units, "ago"].join(" ");
};

/*
 * Wraps up a common pattern used with this plugin whereby you take a String 
 * representation of a Date, and want back a date object.
 */
Date.fromString = function(str) {
  return new Date(Date.parse(str));
};

date.to_relative_time.jquery.js

(function($) {
    /*
     * A handy jQuery wrapper for converting tags with JavaScript parse()-able
     * time-stamps into relative time strings.
     *
     * Usage:
     *   Suppose numerous Date.parse()-able time-stamps are available in the 
     *   inner-HTML of some <span class="rel"> elements...
     *
     *   $("span.rel").toRelativeTime()
     *
     * Examples: '5 years ago', '45 minutes ago'
     *
     * Requires date.extensions.js to be loaded first.
     */
    $.fn.toRelativeTime = function() {
      this.each(function() {
        var $this = $(this);
        $this.text(Date.fromString($this.html()).toRelativeTime());
      });
    };
  })(jQuery);

我只试图更改date.to_relative_time.js文件，但它仍然没有以正确的格式出现。它应该显示类似于"5分钟前“或"3小时前”的内容，但它只是显示了一种不同的时间格式：Tue Feb 04 2014 13:10:00 GMT+0530 (India Standard Time)

知道怎么解决这个问题吗？谢谢!

Answer 1

在wordpress中$ 不得提及 to jQuery库

jQuery(function ($) {
    $.get("https://dl.dropboxusercontent.com/u/27854284/Stuff/Music/Now.Playing.Winamp/nowPlaying_test.html", function (data) {
        console.log(data)
        $("#nowPlayingInfo").html(data);
    });
});

在加载的html中。

jQuery(function ($) {
    var now = new Date(); //"now"
    var play_Time = new Date("2014/02/03 15:49:49"); // some date
    var diff = Math.abs(now - play_Time);
    var diff_minutes = Math.round(diff / (1000 * 60));
    $("#now_playing_txt").text(new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes() - diff_minutes).toString());

    $("span.rel_").toRelativeTime();
});
jQuery(function ($) {
    var on_off = "off";
    if (on_off == "on") $("#shuffle_s").text("Enabled");
    else $("#shuffle_s").text("Disabled");
});