In discourse categories page have one class i can target to add custom text using content on class::after but this function create text on all the images because all have same class .category-logo.aspect-image img , i want to add unique text below all categories , i have written this code but it only works after reloading the page. please support
<script>
document.addEventListener("DOMContentLoaded", function() {
$(function() {
var categories = [
{
logoUrl: "/uploads/",
line1: "ATALANTA, USA",
line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
},
{
logoUrl: "/uploads", // Replace with actual image URL for Category 2
line1: "Denver, United States",
line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
},
// Add more objects for other categories
{
logoUrl: "/uploads", // Replace with actual image URL for Category 2
line1: "Dowman Drive, Atalanta",
line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
},
{
logoUrl: "/uploads", // Replace with actual image URL for Category 2
line1: "ATALANTA, USA",
line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
},
{
logoUrl: "/uploads", // Replace with actual image URL for Category 2
line1: "ATALANTA, USA",
line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
},
{
logoUrl: "/uploads", // Replace with actual image URL for Category 2
line1: "ATALANTA, USA",
line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
},
];
$(".category-heading").each(function(index) {
var category = categories[index];
var $logoElement = $(this).find(".category-logo img");
var $descriptionElement = $("<p>")
.html(category.line1 + "<br>" + category.line2)
.addClass("custom99"); // Add your custom class name here
$logoElement.after($descriptionElement);
});
});
});
</script>
Aucun commentaire:
Enregistrer un commentaire