J'ai besoin d'obtenir le nom de classe du <li> actif sur différentes étapes de paiement sur ma page car elles sont appelées par javascript.

Par exemple:

Étape 1

<ul class="checkout-bar">
<li class="active first"></li>
<li class="next"></li>
<li class="last"></li>
</ul>

Étape 2

<ul class="checkout-bar">
<li class="visited first"></li>
<li class="active"></li>
<li class="last"></li>
</ul>

Étape 3

<ul class="checkout-bar">
<li class="visited first"></li>
<li class="visited "></li>
<li class="active last"></li>
</ul>

J'ai donc besoin de pouvoir passer au datalayer à chaque étape:

Step1 "actif en premier"

Étape 2 "active"

Étape3 "dernière activité"

J'ai essayé mais ça ne marche pas:

function() {

var element=document.querySelector('ul.checkout-bar > li');

return element ? element.value : undefined;

}
1
chappers 14 avril 2018 à 17:29

5 réponses

Meilleure réponse

Vous devez filtrer les éléments "li" avec la classe "active" et renvoyer classList.value:

function foo() {
    var element=document.querySelector('ul.checkout-bar > li.active');
    return element ? element.classList.value : undefined;
}
1
raul.vila 14 avril 2018 à 14:40

Vous avez raté la première chose de querySelector si vous n'avez pas mentionné la classe active. La deuxième chose est que vous utilisez la valeur (aucune propriété de ce type en javascript pour les éléments HTML autres que l'entrée, utilisez plutôt l'attribut innerText et innerHTML pour obtenir le contenu requis) et la condition. Je voudrais suggérer du code comme ci-dessous. Mais n'oubliez pas querySlector toujours créer un tableau d'éléments et pointera toujours le premier élément.

 <ul class="checkout-bar">
    <li class="active first">hello1</li>
    <li class="next">hello2</li>
    <li class="last">hello3</li>
</ul>
<script>
    alert(activeText());
    function activeText()
    {
        var element=document.querySelector('ul.checkout-bar > li.active');
        return (typeof element != 'undefined')?element.innerText : undefined;
    }
</script>
0
Veshraj Joshi 14 avril 2018 à 14:58

Si vous souhaitez obtenir des classes d'éléments, du contenu ou Dom actifs, essayez ceci:

function() {

          ‍‍var element=document.querySelector('ul.checkout-bar > li.active');

          // If you want class list in string divided by space : 
          var classList= element ? element.classList.toString() : undefined;

          // If you want active element ;
          var activeElem=element?element:undefined;

          // If want text content of active element :
          var content=element?element.textContent:undefined;

          // Return variable that want :
          return classList;

}
0
Mehran Prs 14 avril 2018 à 14:49

Vous pouvez essayer ceci pour obtenir le deuxième nom de classe dans l'attribut class.

Considérez l'exemple ci-dessous

<ul class="checkout-bar">
<li class="active first"></li>
<li class="next"></li>
<li class="last"></li>
</ul>

<script>
 var nam=$('.checkout-bar li.active').attr('class').split(' ')[1];
 console.log(nam); //will return "first" as class name since li having 
           //class active has another class after active is "first" 
</script>
0
shashikant kuswaha 14 avril 2018 à 14:53

Si vous devez disposer du classList d'un élément, sachez que ce n'est pas une chaîne, ni un tableau, c'est un DOMTokenList qui est un ensemble de jetons délimités par des espaces (un jeton est apparemment une chaîne sans guillemets.) La meilleure façon de s'en approcher consiste à le considérer comme un objet de type tableau avec son propre ensemble de méthodes .

Démo

Détails commentés dans la démo

//~~~~~~~~~~~~~~~~~~~~~~~~setActive()~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/* setActive() function is provided in order to make this Demo interactive. It is not the primary part of the answer, so I will forego the step-by-srep explination. */

/* Anytime a list item is clicked, setActive() will toggle .active class and add the .visited class as well. */

document.querySelector('.checkout-bar').onclick = setActive;

const lis = document.querySelectorAll('li');

function setActive(e) {
  if (e.target.tagName === "LI") {
    for (let i = 0; i < lis.length; i++) {
      lis[i].classList.remove('active');
    }
    e.target.classList.add('active', 'visited');
  }
  console.log(getClasses(".active", items));
}

//~~~~~~~~~~~~~getClasses(selector, items)~~~~~~~~~~~~~~~~~~~~~~~

/* Create an array of strings that represent the classes you want 
|| to find on any given selector.
*/
var items = ["active", "visited", "first", "middle", "last"];

/* 1st parameter is a selector of the element you wish to examine
|| 2nd parameter is an array of classes you want to search for
*/
/* A classList is accessed through the DOMTokenList interface.
|| A DOMTolkenList is not a string nor is it an array, it is a set
|| of tokens delimited by a space. It's best to regard a DTL as an
|| array-like object.
*/
/* getClasses() function will collect/compare the classList of any
|| given element by a selector (needs to be selector syntax) to an
|| array of classNames. It will return an array of matches.
*/
function getClasses(selector, items) {
  let node = document.querySelector(selector);
  let list = node.classList;
  var matches = [];
  items.forEach(function(item) {
    if (list.contains(item)) {
      matches.push(item);
    }
  });
  return matches;
}

var result = getClasses(".active", items);

console.log(result);
li {
  list-style: none;
  cursor: pointer;
  line-height: 2;
}

.visited {
  color: tomato
}

.active {
  background: #333;
  color: #fc0;
}




/* For Demo Purposes Only */

.as-console-wrapper.as-console-wrapper {
  max-height: 75px
}
<ul class="checkout-bar">
  <li class="first">First</li>
  <li class="middle">Middle</li>
  <li class="last active">Last</li>
</ul>
0
zer00ne 14 avril 2018 à 18:07