我有以下代码,放在名为" showLessMore.js"的文件中。此文件与用于呈现网页的python文件位于同一文件夹中:
(function($) {
$.fn.shorten = function (settings) {
var config = {
showChars: 100,
ellipsesText: "...",
moreText: "more",
lessText: "less"
};
if (settings) {
$.extend(config, settings);
}
$(document).off("click", '.morelink');
$(document).on({click: function () {
var $this = $(this);
if ($this.hasClass('less')) {
$this.removeClass('less');
$this.html(config.moreText);
} else {
$this.addClass('less');
$this.html(config.lessText);
}
$this.parent().prev().toggle();
$this.prev().toggle();
return false;
}
}, '.morelink');
return this.each(function () {
var $this = $(this);
if($this.hasClass("shortened")) return;
$this.addClass("shortened");
var content = $this.html();
if (content.length > config.showChars) {
var c = content.substr(0, config.showChars);
var h = content.substr(config.showChars, content.length - config.showChars);
var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> <a href="#" class="morelink">' + config.moreText + '</a></span>';
$this.html(html);
$(".morecontent span").hide();
}
});
};
})(jQuery);
当我将代码直接放入网页时,它的工作非常完美。但是,当我尝试使用外部文件&#34; showLessMore.js&#34;如下,它不起作用:
s.wfile.write('<script src="showLessMore.js"></script>')
这是html页面中的输出,但是当我点击我的JS文件的链接时,它没有显示该文件,这很奇怪:
....
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"><!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script><script src="showLessMore.js"></script>
....
你能告诉我这是什么原因吗?