data-i18n 不显示符号

Question

我创建了一个按钮。必须随时更改其上的语言。我编写了以下代码来完成任务

var $button = $( '<a class="btn">' )
 .attr( 'href', '#' ).prepend(
 '<span class="fa fa-plus"></span>', ' ' )
 .attr( 'data-i18n', 'text' )
 .tooltip( {
    title: 'change item'
   } );

这成功改变了语言，但它不显示图标“+”。

var $button = $( '<a class="btn">' )
   .text( 'sample text' )
   .append( '<span data-i18n="text">sample text</span>' )
   .attr( 'href', '#' ).prepend(
   '<span class="fa fa-plus"></span>', ' ' )
    .tooltip( {
        title: 'change item'
    } );

第二个案例工作并正确显示它，包括语言的变化。但我无法理解第一个代码示例中的错误。谁能帮我吗？提前致谢

Answer 1

我猜你使用 jquery-i18next：

<a ... data-i18n="text"><span class="fa fa-plus"></span>hello</a> 会将其内容替换为关键文本给出的翻译。所以翻译后你会得到：不管翻译是什么`

像你在第二个示例中所做的那样断言只有内部跨度被替换，而不是锚标记的完整内容。

但您也可以执行 <a ... data-i18n="[prepend]text">...: https://github.com/i18next/jquery-i18next#prepend-content 之类的操作来达到同样的效果。

Answer 2

您的代码语法无效。在第二个 attr 函数内的 text 变量之后，您有一个额外的 '

您的代码：

var $button = $( '<a class="btn">' )
 .attr( 'href', '#' ).prepend(
 '<span class="fa fa-plus"></span>', ' ' )
 .attr( 'data-i18n', text' )
 .tooltip( {
    title: 'change item'
 });

有效代码：

var $button = $( '<a class="btn">' )
 .attr( 'href', '#' ).prepend(
 '<span class="fa fa-plus"></span>', ' ' )
 .attr( 'data-i18n', text )
 .tooltip( {
    title: 'change item'
 });