获取活动 li 类名的 Javascript

Question

我需要在页面上的不同结帐步骤中获取活动 <li> 的类名，因为它们是由 javascript 调用的。

例如：

第一步

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

第二步

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

第三步

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

所以我需要能够在每一步都传递给数据层：

第 1 步 “先激活”

第二步 “活跃”

第三步 “最后活动”

我试过了，但它不起作用：

function() {

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

return element ? element.value : undefined;

}

Answer 1

你应该用“active”类过滤“li”元素并返回classList.value：

function foo() {
    var element=document.querySelector('ul.checkout-bar > li.active');
    return element ? element.classList.value : undefined;
}

Answer 2

你错过了querySelector 中的第一件事是你没有提到active 类。第二件事是您利用值（javascript 中除了输入之外的 HTML 元素没有这样的属性，而是利用 innerText 和 innerHTML 属性来获取所需的内容）和条件。我想建议如下代码。但请记住querySlector 总是创建一个元素数组并且总是指向第一个元素。

 <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>

Answer 3

如果你想获得活跃的元素类、内容或 Dom，试试这个：

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;

}

Answer 4

你可以试试这个来获取类属性中的第二个类名。

考虑下面的示例

<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>

Answer 5

如果你需要一个元素的classList，请注意它不是一个字符串，也不是一个数组，它是一个DOMTokenList，它是一组空格分隔的标记（一个标记显然是一个不带引号的字符串。）处理它的最佳方法是将其视为具有自己的一组 methods 的array-like object。

演示

Demo中评论的细节

//~~~~~~~~~~~~~~~~~~~~~~~~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>