<a>标签

Question

我目前正在使用下面的标记，它被呈现为一个按钮，上面只有一个图标。

我希望这是一个图标，后面跟着单词Export PDF。

通常，我不会像这样创建按钮，但是我使用的是Kendo控件，它为我生成按钮。一旦呈现该按钮，如下所示：

<a href="" role="button" class="k-tool k-group-start k-group-end" 
    unselectable="on" title="Export PDF">
    <span unselectable="on" class="k-tool-icon k-pdf"></span>
    <span class="k-tool-text">Export PDF</span>
</a>

我试图使用JQuery将我想要的文本注入元素中，如下所示：

<script>
        $(document).ready(function () {
            $('.k-tool-icon').text("Export PDF");
        });
</script>

然而，这并没有改变任何事情。我仍然得到的按钮只有一个图标。

编辑:下面是C# MVC kendo编辑器，它呈现上述发布的html：

@(Html.Kendo().Editor()
      .Name("editor")
      .HtmlAttributes(new { style = "height:900px" })
      .Pdf(pdf => pdf
          .Margin(20, 20, 20, 20)
          .ProxyURL(Url.Action("Pdf_Export_Save", "Editor"))
      )
      .Tools(tools => tools
          .Clear()
          .Pdf()
      )
      .Value(@<text>
        <code>
            @Html.Raw(HttpUtility.HtmlDecode(Model.ReportString))
        </code>
    </text>)
    )

Answer 1

如果要替换内容，则使用本机DOM要快得多

在上面给出的代码示例中，按钮前后都有相同的文本。

Before: <span class="k-tool-text">Export PDF</span>
After: $('.k-tool-icon').text("Export PDF");

// Use Native DOM for better performace
$(document).ready(function () {
    document.querySelector('.k-tool-icon').textContent = `Export PDF`;
});

不过，不管怎么说，你在这里展示的代码是有效的。

Answer 2

@peggy，可能您的问题是，在文档准备好之后，kendo进程会延迟到很多，而不是当它试图添加文本时，由kendo生成的元素仍然不存在。

当Kendo已经完成处理时，尝试在某些事件上添加$('.k-tool-icon').text("Export PDF");；