Unique CSS class for Group pages?

Contribute UX
7

إليك طريقة غير أنيقة للقيام بذلك. إضافة الكلاس سهلة. سيؤدي هذا إلى إضافة groupname إلى معرف main الخاص بك، حيث يكون groupname هو اسم المجموعة، أي section id="main" class="ember-application groupname"

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                if (myObj.group.name) {
                    document.getElementById("main").classList.add(myObj.group.name);
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();                
    }
    api.onPageChange(() =>{
        getGroupInfo();
    });
</script>

المشكلة هي أن الكلاس يبقى موجودًا بمجرد التنقل بعيدًا. نحتاج إلى طريقة لإزالة ذلك الكلاس عند مغادرة الصفحة. ربما توجد طريقة سهلة للقيام بذلك، لكنني لا أعرف JavaScript حقًا، لذا فأنا لست بارعًا بما يكفي لاكتشافها. آمل أن تتمكن من إيجاد طريقة أفضل للقيام بذلك، لكن الطريقة غير الأنيقة هي تغيير نهاية السكربت إلى

    api.onPageChange(() =>{
        document.getElementById("main").classList.remove("group1");
        document.getElementById("main").classList.remove("group2");
        document.getElementById("main").classList.remove("group3");
        getGroupInfo();
    });

سيؤدي هذا إلى إزالة أي كلاس لاسم مجموعة قمت بإضافته. لكنه يبدو وكأنه طريقة غير أنيقة جدًا للقيام بذلك، ويجب عليك تغيير الكود في كل مرة تضيف فيها مجموعة جديدة.

إعجاب واحد (1)