Question

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

例如：

步骤1

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

步骤3

<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

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

考虑以下示例

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

你错过querySelector中的第一件事是你没有提到active课程。第二件事是你利用价值（除了输入之外的HTML元素在javascript中没有这样的属性，而是使用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 5

如果你需要一个元素的classList，要注意它不是一个字符串，也不是一个数组，它是一个由DOMTokenList组成的空格分隔的集合token（一个标记显然是一个没有引号的字符串。）接近一个标记的最佳方法是将其视为array-like object，其中有一组 methods 。

演示

在演示中评论的详细信息

＆＃13;

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

＆＃13;

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
}

＆＃13;

<ul class="checkout-bar">
  <li class="first">First</li>
  <li class="middle">Middle</li>
  <li class="last active">Last</li>
</ul>

＆＃13;

Javascript获取活动的li类名称

5 个答案:

演示