我想要在文本上有一个“阅读更多”点击功能。我正在动态加载特定关键字的维基百科文本并具有此功能:
function setText(text, lang, full) {
setTimeout(function () { $('#loading').fadeOut('fast'); }, 300);
var mylang = '<?= $_SESSION['lang']; ?>';
if (mylang != 'en' && lang == 'en')
var AppendText = '<span class="db f09 grey mt10"><?= __('TEXT_ONLY_ENGLISH'); ?></span>';
console.log(lang);
if (full) {
$('#text').html('<?= __('EMPTY'); ?>');
setTimeout(function () { $('#text').fadeIn('fast'); }, 500);
} else if (text) {
// Full Text
function fullText() {
console.log('yes');
setText(text, lang, 1);
}
text = text.length > length ? text.substring(0, length - 3) +
'... <a class="cp" onclick="fullText()"><?= __('MORE') ?></a>' : text;
$('#text').html(text).append(AppendText);
setTimeout(function () { $('#text').fadeIn('fast'); }, 500);
}
};
正如您在 else if
部分中看到的,我定义了 fullText()
函数,设置为 anchor 标记上的 onclick。当我点击它时,我总是收到消息fullText is not Define
。
我只想重新调用相同的 setText()
函数,并将变量 full
设置为 1
,因此将显示全文的
Sometext... (more)
如果不使用ajax
,这可能吗?我有什么选择?
PS:我也已经尝试调用 setText()
本身而不是 fullText()
,但这也不会被识别为已定义的函数。
最佳答案
使用onclick
属性,您只能引用全局范围内的函数。要解决此问题,您可以动态附加事件处理程序,而不是使用 onclick
属性。
为了完成此任务,我建议进行一些更改,从而生成以下代码:
function setText(text, lang, full) {
setTimeout(function () { $('#loading').fadeOut('fast'); }, 300);
var mylang = '<?= $_SESSION['lang']; ?>';
// change 1: define an element with jQuery
var $appendText = $('<span>');
if (mylang != 'en' && lang == 'en')
$appendText.addClass('db f09 grey mt10').text('<?= __('TEXT_ONLY_ENGLISH')?>');
console.log(lang);
if (full) {
// change 2: use text(), not html()
$('#text').text('<?= __('EMPTY'); ?>');
} else if (text) {
// Full Text
// Change 3: define link as jQuery element:
var $link = $('<a>');
if (text.length > length) {
text = text.substring(0, length - 3);
$link.addClass('cp').text('<?= __('MORE') ?>');
// Change 4: attach click handler here:
$link.click(function fullText() {
console.log('yes');
setText(text, lang, 1);
});
}
// Change 5: append these jQuery elements, which can be empty:
$('#text').text(text).append($link).append($appendText);
}
// Change 6: move this out of the if-block, as it is the same for both cases:
setTimeout(function () { $('#text').fadeIn('fast'); }, 500);
};
请注意,您没有提供变量length
的定义,但我认为该函数可以使用它。
关于异步加载内容时 JavaScript 无法识别我的函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40451434/