Javascript ersetzen Hilfe

Question

Ich versuche, Javascript zu verwenden, um ein paar Bits des Textes auf einer Checkout-Seite für einen Warenkorb, die ich bin mit stecken zu ändern.

Ich habe die folgende Lösung, die für die wenigen Stücke, die mit IDs gekennzeichnet sind, funktioniert. Das Problem ist, dass eines der Stücke, die ich ändern möchte, eine Klasse ist, und ich kann nicht scheinen, um es zu arbeiten.

Kann mir jemand helfen, wie ich das Folgende für eine Klasse umsetzen kann? Danke

window.onload = function() {
    var str = "Price per Unit";
    el = document.getElementById('pricePerUnit');
    el.innerHTML = str;
    var date = new Date();
    var hours = date.getHours();

    if (hours >= 0 && hours < 24) {
        el.innerHTML = str.replace("Price per Unit", "Price");
    }
}

edit: hier ist der Code, den ich versuche zu ändern, im Grunde möchte ich die $30 ändern, um $30+$5/mo zu sagen, es gibt nur ein Element für diese Klasse

<td valign="top" align="center" class="unitprice">
<font size="2" face="Arial, Helvetica, sans-serif" color="">$30.00</font></td>

Answer 1

Das Abrufen von Elementen nach Klassennamen ist in JavaScript nicht so einfach wie das Abrufen von Elementen nach ID. Einige Browser haben eine Reihe von Funktionen, die dabei helfen, aber nicht alle. Die erste Funktion ist getElementsByClass die in Firefox 3 und den neueren Versionen von Chrome, Safari und Opera unterstützt wird. Es wird jedoch nicht von IE 8 und niedriger unterstützt. Außerdem gibt es querySelector y querySelectorAll die ein bzw. alle Elemente abrufen, die einem CSS-Selektor entsprechen. Diese werden von den meisten Browsern unterstützt, einschließlich IE 8, aber nicht von IE 7 und niedriger.

Am besten verwenden Sie eine Bibliothek wie jQuery o Prototyp die DOM-Abfragen für Sie implementiert. Wenn Sie das nicht tun wollen, besteht die einzige browserübergreifende Lösung darin, alle "potenziellen" Elemente zu durchlaufen und die className Eigenschaft der jeweiligen Klasse, die Sie suchen. Der Code hierfür variiert je nachdem, wo die Elemente platziert sind, welche Tags den Klassennamen tragen usw.

Answer 2

Um Ihnen einige Codes an die Hand zu geben (aber alle Credits an Antwort von Andy E. ):

var element;
var cls = 'unitprice';

if(document.querySelector) {
    element = document.querySelector('.' + cls)
}
else if(document.getElementsByClassName) {
    element = document.getElementsByClassName(cls)[0];
}
else {
   var tds = document.getElementsByTagName('td');
   for(var i = tds.length; i--;) {
       element = tds[i];
       if(element.className == cls) {
           break;
       }
   }
}

element.children[0].innerHTML += "+$5/mo";

_(Nebenbemerkung: Ich verwende children[] hier, weil firstChild könnte einen leeren Textknoten zurückgeben. Wenn Sie sicher sind, dass es keinen leeren Textknoten vor dem font Element (wenn Sie es ohnehin entfernen und Klassen zur Gestaltung des Inhalts verwenden können), können Sie auch firstChild stattdessen (Sie können auf der Konsole testen, was element.firstChild gibt Ihnen). children[] wird von Firefox 3.0 nicht unterstützt allerdings)_

Dies funktioniert nur unter der Annahme, dass es wirklich nur eine Element im gesamten Dokument mit dieser Klasse.

Beachten Sie auch die Kommentare zu den anderen Antworten. Wenn Sie mehr Elemente auswählen wollen oder schwierigere Selektoren haben, sollten Sie auf jeden Fall eine Bibliothek verwenden.

Wenn Sie die ID eines Vorgängers dieser Tabellenzelle kennen (wie die Tabelle selbst), können Sie die Suche nach diesem Element verbessern, indem Sie zuerst den Vorgänger ermitteln.

Answer 3

Könnten Sie die JavaScript-Funktion getElementsByClass