Html Text von <a> ändern Tag

Ich arbeite derzeit mit dem folgenden Tag, das als eine Schaltfläche mit nur einem Symbol gerendert wird.
Ich möchte, dass dies das Symbol wird, gefolgt von den Worten Export PDF.Html Text von <a> ändern Tag

Normalerweise würde ich die Schaltfläche nicht so erstellen, aber ich verwende eine Kendo-Steuerung, die den Knopf für mich erzeugt. Einmal machte die Schaltfläche sieht wie folgt aus:

<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>

Ich versuche, JQuery zu verwenden, um meinen gewünschten Text in das Element zu injizieren, wie folgt:

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

aber dies ändert nichts. Ich bekomme immer noch den Knopf mit nur einem Icon.

Edit: Unten ist der C# MVC Kendo-Editor, der den oben gepostet HTML gerendert wird:

@(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>) 
    )

Quelle

2016-04-26 GregH

Funktioniert für mich https://jsfiddle.net/j08691/f0pcyx1q/ – j08691

Das Symbol verwendet wahrscheinlich eine Textersetzungstechnik. Was ist falsch an der Gestaltung der .k-Tool-Textspanne? – moopet

@ j08691 vielleicht funktioniert es für Sie, da Sie nicht wirklich einen Kendo-Editor verwenden? Ich bin mir nicht sicher. Aber es funktioniert definitiv nicht für mich – GregH

Wenn Sie den Inhalt ersetzt werden sollen es viel schneller sein würde nativen DOM

In der verwenden Codebeispiel, das Sie oben angegeben haben, haben denselben Text auf der Schaltfläche davor und danach.

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

Aber wie auch immer der Code, den Sie hier zeigte funktioniert.

Quelle

2016-04-26 14:25:19 CodeWizard

Ich habe den Code für die Kendo-Steuerung, die ich auch verwende, gepostet. Dies muss der Grund dafür sein, dass es nicht für mich funktioniert, sondern für andere hier arbeitet, die direkt den HTML-Code von Kendo verwenden – GregH

@peggy, wahrscheinlich ist das Problem, dass der Kendo-Prozess zu viel verzögert, nachdem das Dokument fertig ist, als wenn es versucht, den Text hinzuzufügen, das Element von Kendo generiert noch nicht existiert.

Versuchen Sie, die $('.k-tool-icon').text("Export PDF"); auf ein Ereignis hinzuzufügen, wenn Kendo bereits fertig ist zu verarbeiten;

Quelle

2016-04-26 14:37:42

Html Text von <a> ändern Tag

Antwort

Verwandte Themen