Erkennt die IMG-Tags aller Benutzeravatare und erstellt eine Div, um die IMG-Tags aller Benutzer zu umschließen
Weiß jemand wie? Ich füge das Div in das img-Tag des Benutzeravatars ein und kann dann das eingefügte Div als Avatarrahmen festlegen.
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
// Finde alle img-Elemente mit der Klasse 'avatar'
const avatarImages = document.querySelectorAll('img.avatar');
avatarImages.forEach(img => {
// Erstelle ein neues div-Element und setze seinen Klassennamen auf 'by9700'
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// Verschiebe das img-Element in das neue div
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
});
});
</script>
Es ist so, aber der Code wird nicht wirksam.
Hallo 
Was genau möchten Sie erreichen? Ist dies etwas, das zum Beispiel mit CSS-Pseudo-Elementen nicht möglich ist?
2 „Gefällt mir“
Pseudo-Klassen-Elemente können implementiert werden, aber er muss die Position jedes Avatarrahmens anpassen, und er kann sich an die Avatar-Größe anpassen, ohne Pseudo-Klassen zu verwenden.
Ich schätze, es funktioniert – Können Sie teilen, wie Sie diesen Code verwenden?
Wir haben jedoch auch Elementänderungen auf derselben Seite. Daher habe ich einige Änderungen an Ihrem Code vorgenommen, die den Anforderungen entsprechen sollten:
const throttle = require("@ember/runloop").throttle;
const context = {
wrapImg() {
const avatarImages = document.querySelectorAll('img.avatar:not(.wrapped)');
avatarImages.forEach(img => {
// Erstellt ein neues div-Element und setzt seinen Klassennamen auf by9700
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// Verschiebt das img-Element in das neue div
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
// Markiert das img
img.classList.add("wrapped");
});
}
};
new MutationObserver(() => {
throttle(context, context.wrapImg, 100);
}).observe(document.body, {
childList: true, // Beobachtet Änderungen an den direkten Kindknoten des Ziels, ob welche hinzugefügt oder entfernt wurden
attributes: false, // Beobachtet keine Attributänderungen
subtree: true // Beobachtet die Kindknoten rekursiv
});
1 „Gefällt mir“
Vielen Dank für Ihre Antwort, ich habe eine Problemumgehung gefunden: Verwenden Sie JavaScript-Code, um ein img-Tag mit der Klasse avatar zu erkennen und ein div-Tag mit der Klasse avatar-wrappers zu erstellen, um es zu umschließen, sodass alle Avatare des Benutzers von einem neu erstellten div umgeben sind. Verwenden Sie dann Pseudo-Klassen-Elemente, um über die CSS der Benutzergruppe unterschiedliche Avatar-Rahmen für Mitglieder verschiedener Benutzergruppen hinzuzufügen. Passen Sie dann automatisch die Höhe und Breite des Avatar-Rahmens an, indem Sie die Breite und Höhe des Benutzeravatars über JavaScript identifizieren. Dies implementiert den globalen Avatar-Rahmen der Website.
Ich habe den JavaScript-Code unten geteilt
<script type="text/javascript">
(function() {
function wrapAvatars() {
// Alle img-Tags mit der Klasse avatar abrufen
var avatars = document.querySelectorAll('img.avatar');
// Jedes img.avatar durchlaufen
avatars.forEach(function(avatar) {
// Prüfen, ob das img bereits verpackt wurde
if (!avatar.parentNode.classList.contains('avatar-wrappers')) {
// Ein neues div-Element erstellen
var wrapper = document.createElement('div');
// Eine benutzerdefinierte Klasse für das neu erstellte div-Element hinzufügen
wrapper.className = 'avatar-wrappers';
// img.avatar in das neue div einpacken
avatar.parentNode.insertBefore(wrapper, avatar);
wrapper.appendChild(avatar);
}
});
}
// Auf das erstmalige Laden der Seite warten
document.addEventListener('DOMContentLoaded', function() {
wrapAvatars();
// MutationObserver verwenden, um DOM-Änderungen zu überwachen
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
wrapAvatars();
}
});
});
// Beobachteroptionen konfigurieren
var config = { childList: true, subtree: true };
// Mit der Beobachtung des Wurzelelements des Dokuments beginnen
observer.observe(document.body, config);
});
})();
</script>
<script type="text/javascript">
(function() {
function adjustWrapperSizes() {
// Alle div-Tags mit der Klasse avatar-wrapper abrufen
var wrappers = document.querySelectorAll('div.avatar-wrapper');
// Zu erhöhende Breiten- und Höhenwerte festlegen
var widthIncrease = 9; // Zum Beispiel 20px erhöhen
var heightIncrease = 9; // Zum Beispiel 20px erhöhen
// Jedes div.avatar-wrapper durchlaufen
wrappers.forEach(function(wrapper) {
// Das untergeordnete img-Element des aktuellen div abrufen
var img = wrapper.querySelector('img');
if (img) {
// Die tatsächliche Breite und Höhe des img abrufen
var imgWidth = img.offsetWidth;
var imgHeight = img.offsetHeight;
// Neue Breite und Höhe berechnen
var newWidth = imgWidth + widthIncrease;
var newHeight = imgHeight + heightIncrease;
// Breite und Höhe des div festlegen
wrapper.style.width = newWidth + 'px';
wrapper.style.height = newHeight + 'px';
}
});
}
// Sicherstellen, dass dies beim erstmaligen Laden des DOM-Inhalts ausgeführt wird
document.addEventListener('DOMContentLoaded', function() {
adjustWrapperSizes();
// MutationObserver verwenden, um DOM-Änderungen zu überwachen
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
adjustWrapperSizes();
}
});
});
// Beobachteroptionen konfigurieren
var config = { childList: true, subtree: true };
// Mit der Beobachtung des Wurzelelements des Dokuments beginnen
observer.observe(document.body, config);
});
})();
</script>
1 „Gefällt mir“