如何在 Wordpress 中通过 jquery/css 加载动态内容（get、html、数据）？

Question

我正在尝试重新编辑我的网站，并将其内容转换为 wordpress。我有一个图层滑块，其中我选择了<div/video> 选项来添加一个 NowPlaying html div，该 div 是通过 jquery 从我的 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 上不起作用...我正在为我的 wordpress 使用带有 localhost url 的 xampp...

请有人建议将此内容加载到 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 中 $ may not refer 到 the jQuery library

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