web-dev-qa-db-fra.com

Changer dynamiquement l'ID d'un href en fonction de la classe de page

Je cherche à créer un remplacement d'un composant pour ajouter un bouton. Toutefois, pour chaque page qui utilise le remplacement, j'ai besoin que le bouton ait un identifiant différent, car en cliquant sur le bouton, un menu de la barre latérale s'ouvrira avec engagebox. Engagebox utilise les classes/ID pour identifier l'action requise. Ainsi, par exemple, le code source du bouton était le suivant:

<a href="#" class="sidemenu" id="**dynamic class based on page class**"></a>

alors si la classe de page est .industry, est-il possible de définir id = "industry"?

***** Mise à jour ******

Chaque page a un menu dans la barre latérale. À l’heure actuelle, cela gêne le contenu de la page. Le propriétaire du site Web souhaite donc que ces menus deviennent un menu déroulant. Le menu doit également être ouvert lors du chargement de la page d'origine. Celles-ci peuvent être fermées manuellement par l'utilisateur à l'aide du bouton de fermeture du menu. Toutefois, un bouton sera également nécessaire pour ouvrir et fermer le menu manuellement. Pour ce faire, le bouton doit inclure la valeur data-ebox dans les balises div/button. Je peux ajouter ce bouton en tant que remplacement, mais cela ne permettra pas à la valeur data-ebox de changer en fonction de la page sur laquelle le menu est affiché (le menu est différent sur chaque page), de sorte que chaque page nécessite une valeur data-ebox différente.

Mon objectif initial était toutefois de créer un tableau de valeurs data-ebox permettant de lier le menu offcanvas correct à la page correcte.

<a href="#" data-ebox="1" class="sidemenu" id="generated page class"></a>

À partir de ce moment, je devrais sélectionner le numéro de boîte électronique correct parmi ce que je suppose, ce serait un tableau de tous les numéros de boîte de données disponibles. Je suppose que cette partie devrait être JS. Donc par exemple:

data-ebox 1 = .industry data-ebox 2 = .services data-ebox 3 = .business

Etc. Est-ce possible?

Toute idée/suggestion serait la bienvenue.

J'ai créé le code suivant, qui y parvient, mais la variable ebox n'est pas mise à jour en fonction de la variable pageclass. Toute suggestion sera très appréciée. J'ai ajouté l'écriture doc pour exporter les valeurs de variable à des fins de test. J'ai également mis en place un site intermédiaire ici et créé un remplacement d'article et ajouté le code qui a configuré les classes de page pour les pages Accueil/À propos/Contact. Toute aide serait appréciée.

<?php 
            $menu  = JFactory::getApplication()->getMenu()->getActive();
            $class = $menu->params->get('pageclass_sfx');
        ?>

        <script>
            var pageclass = "'<?php echo $class ;?>'";
            var ebox = 0;
            document.write(pageclass, ebox);

        if (pageclass == "home") {
            ebox = 1;
            } 
        else if (pageclass == "about") {
            ebox = 2;
            }
        else if (pageclass == "contact") {
            ebox = 3;
            }

        document.write('<a class="btn" data-ebox="' + ebox + '" href="#">Menu</a>');
        document.write(pageclass,ebox);
</script>

Cordialement Donna

joomla-3.xjavascript
1
Dtorr1981

Vous pouvez obtenir le suffixe de classe de page, comme suit:

$menu  = JFactory::getApplication()->getMenu()->getActive();
$class = $menu->params->get('pageclass_sfx');

puis ajoutez-le comme identifiant pour votre ancre, comme ceci:

<a href="#" class="sidemenu" id="<?php echo $class; ?>"></a>
1
Lodder