Rileva i tag IMG di tutti gli avatar utente e crea un div per racchiudere i tag IMG di tutti gli utenti
Qualcuno lo sa fare? Inserisco il div nel tag img dell’avatar dell’utente, e poi posso impostare il div inserito come cornice dell’avatar
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
// Trova tutti gli elementi img con la classe avatar
const avatarImages = document.querySelectorAll('img.avatar');
avatarImages.forEach(img => {
// Crea un nuovo elemento div e imposta il suo nome di classe su by9700
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// Sposta l'elemento img nel nuovo div
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
});
});
</script>
It's like this, but the code doesn't take effectCiao 
Cosa vuoi ottenere esattamente? È qualcosa che non è possibile ottenere, ad esempio, con un pseudo-elemento CSS?
2 Mi Piace
Gli elementi pseudo-classe possono essere implementati ma deve regolare la posizione di ogni frame dell’avatar e può adattarsi alle dimensioni dell’avatar senza utilizzare pseudo-classi
Suppongo che funzioni – Puoi condividere come usi questo codice?
Tuttavia, abbiamo anche modifiche agli elementi nella stessa pagina. Pertanto, ho apportato alcune modifiche al tuo codice, che dovrebbero soddisfare i requisiti:
const throttle = require("@ember/runloop").throttle;
const context = {
wrapImg() {
const avatarImages = document.querySelectorAll('img.avatar:not(.wrapped)');
avatarImages.forEach(img => {
// Crea un nuovo elemento div e imposta il suo nome di classe su by9700
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// Sposta l'elemento img nel nuovo div
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
// Segna l'img
img.classList.add("wrapped");
});
}
};
new MutationObserver(() => {
throttle(context, context.wrapImg, 100);
}).observe(document.body, {
childList: true, // Osserva le modifiche ai nodi figli del target, se ce ne sono di aggiunti o rimossi
attributes: false, // Non osservare le modifiche agli attributi
subtree: true // Osserva ricorsivamente i nodi figli
});
1 Mi Piace
Grazie mille per la tua risposta, ho trovato una soluzione alternativa: utilizzare codice JavaScript per rilevare un tag img con la classe avatar e creare un tag div con la classe avatar-wrappers per racchiuderlo, in modo che tutti gli avatar dell’utente siano circondati da un div appena creato, e quindi utilizzare elementi pseudo-classe per aggiungere diversi frame avatar per i membri di diversi gruppi di utenti tramite il CSS del gruppo di utenti. Quindi regolare automaticamente l’altezza e la larghezza del frame avatar identificando la larghezza e l’altezza dell’avatar dell’utente tramite JavaScript. Questo implementa il frame avatar globale del sito web.
Ho condiviso il codice JavaScript qui sotto
<script type="text/javascript">
(function() {
function wrapAvatars() {
// Ottieni tutti i tag img con la classe avatar
var avatars = document.querySelectorAll('img.avatar');
// Itera su ogni img.avatar
avatars.forEach(function(avatar) {
// Controlla se l'img è già stato wrappato
if (!avatar.parentNode.classList.contains('avatar-wrappers')) {
// Crea un nuovo elemento div
var wrapper = document.createElement('div');
// Aggiungi una classe personalizzata al div appena creato
wrapper.className = 'avatar-wrappers';
// Racchiudi img.avatar nel nuovo div
avatar.parentNode.insertBefore(wrapper, avatar);
wrapper.appendChild(avatar);
}
});
}
// Ascolta il caricamento iniziale della pagina
document.addEventListener('DOMContentLoaded', function() {
wrapAvatars();
// Utilizza MutationObserver per osservare le modifiche al DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
wrapAvatars();
}
});
});
// Configura le opzioni dell'osservatore
var config = { childList: true, subtree: true };
// Inizia ad osservare l'elemento radice del documento
observer.observe(document.body, config);
});
})();
</script>
<script type="text/javascript">
(function() {
function adjustWrapperSizes() {
// Ottieni tutti i tag div con la classe avatar-wrapper
var wrappers = document.querySelectorAll('div.avatar-wrapper');
// Imposta i valori di aumento di larghezza e altezza
var widthIncrease = 9; // Ad esempio, aumenta di 20px
var heightIncrease = 9; // Ad esempio, aumenta di 20px
// Itera su ogni div.avatar-wrapper
wrappers.forEach(function(wrapper) {
// Ottieni l'elemento img figlio corrente del div
var img = wrapper.querySelector('img');
if (img) {
// Ottieni la larghezza e l'altezza effettive dell'img
var imgWidth = img.offsetWidth;
var imgHeight = img.offsetHeight;
// Calcola la nuova larghezza e altezza
var newWidth = imgWidth + widthIncrease;
var newHeight = imgHeight + heightIncrease;
// Imposta la larghezza e l'altezza del div
wrapper.style.width = newWidth + 'px';
wrapper.style.height = newHeight + 'px';
}
});
}
// Assicurati che venga eseguito al caricamento iniziale del contenuto del DOM
document.addEventListener('DOMContentLoaded', function() {
adjustWrapperSizes();
// Utilizza MutationObserver per osservare le modifiche al DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
adjustWrapperSizes();
}
});
});
// Configura le opzioni dell'osservatore
var config = { childList: true, subtree: true };
// Inizia ad osservare l'elemento radice del documento
observer.observe(document.body, config);
});
})();
</script>
1 Mi Piace