11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Javascript insensible à la casse ou pouvant changer id

Bonjour,

Un gros paquet de javascript que je n'ai pas écrit.

Le but est en gros de d'agir au survol sur des éléments ascendants.

<p id="A">A</p>
<p id="A1">A1</p>
<p id="A2">A2</p>
<p id="AA1">AA1</p>


Survol A1 agit sur A
Survol A2 agit sur A
Survol AA1 agit sur A1 et sur A (mais pas sur A2).

Voilà le cœur de la bête.


function initBotegaRollover ()
{var tables = getElementsByClassName('roll', document);
var customFunction = function (objet, doOver)
{var id = objet.id;

while (id.length > 0)
{id = id.substr (0, id.length - 1);
if (id != '')
{
if (e = document.getElementById(id))
{
doOver ? addClass(e, 'blu') : removeClass(e, 'blu');
}

}
}};
for (var i = 0, l = tables.length; i < l; ++i)
{addCustomRollover(tables[i], customFunction);}}


1) Je ne comprends pas la ligne :

if (e = document.getElementById(id))

2) Mon problème est d'adapter le script pour qu'il soit insensible à la casse de la première ligne.

<p id="a">a</p>
<p id="A1">A1</p>
<p id="A2">A2</p>
<p id="AA1">AA1</p>


Ou si c'est plus facile qu'une lettre soit ajoutée devant l'id de première ligne.

<p id="ZA">A</p>
<p id="A1">A1</p>
<p id="A2">A2</p>
<p id="AA1">AA1</p>


Merci d'avance.
Modifié par boteha_2 (14 May 2020 - 19:36)
Hello,

Je te propose ma petite méthode perso pour ce genre de situations.
Il existe beaucoup de façons de procéder, mais bon il faut bien en choisir une ...
Cette solution offre l'avantage d'être stable et modifiable à souhait, en effet tu n'as qu'à modifier le tableau, le reste du code ne change pas Smiley smile

https://codepen.io/exemple/pen/yLYxYJp

N'hésites pas si tu ne comprends pas un truc !
Bonjour,

Merci de ton aide.

L'ennui de ton script est qu'il faut déclarer un tableau :

 const myList = [
    ["A1","A"],
    ["A2","A"],
    ["AA1","A"],
    ["AA1","A1"]
  ];


C'est vrai que je n'ai pas précisé dans l'énoncé du problème mais la lettre A peut être B, C ou autre, sans que l'on sache à l'avance.

Le script actuel résout le problème en allant chercher les id de façon dynamique.

Le problème du script actuel est qu'il est sensible à la casse.
Je veux le rendre insensible à la casse pour la première ligne : id = une seule lettre minuscule ou majuscule.

Avec ton script, il faudrait ce tableau :

 const myList = [
    ["A1","A"],
 ["A1","a"],
    ["A2","A"],
 ["A2","a"],
    ["AA1","A"],
["AA1","a"],
    ["AA1","A1"]
  ];


Si c'est trop difficile de rendre insensible à la casse la première ligne, une autre approche est de placer une lettre Z devant le A.

<p id="ZA">A</p>
<p id="A1">A1</p>
<p id="A2">A2</p>
<p id="AA1">AA1</p>


En PHP cela serait :

if (substr ($id, 0, 1) == 'Z') $id = substr ($id, 1);


Par ailleurs dans mon script je ne comprends rien à cette ligne :

if (e = document.getElementById(id))


Pour moi if entraîne une comparaison, donc ==, pas une affectation avec =.
Pourtant le script fonctionne ainsi et ne fonctionne plus si je remplace = par ==.
Modifié par boteha_2 (14 May 2020 - 19:28)
Bonjour,

Pour avancer je propose ce codepen.

De cette manière vous comprenez le contexte du problème : responsive.
Le javascript fonctionne sur grand écran mais sur petit écran les lignes à id en minuscule ne sont plus allumées.

J'ai publié tout le code javasript que je n'ai pas écrit mais qui a le mérite de marcher parfaitement sur grand écran et presque bien sur petit écran.

Je préfère des ajouts à ce code pour résoudre le problème plutôt qu'un changement radical.
Modifié par boteha_2 (17 May 2020 - 19:44)
Bonjour,

Il a fallu aller sur un autre forum pour trouver des âmes compatissantes qui ont bien voulu m'aider.

La solution est intégrés au codepen.

En commentaire l'ancien code javascript avec deux versions de function initBotegaRollover (), la deuxième résolvant le problème avec l'ancien code.

Puis le nouveau code beaucoup plus simple.
Sujet clos
Aller à