获取活动li类名的Javascript

我需要在页面上的不同签出步骤上获取活动的

的类名，因为它们是由javascript调用的

例如：

步骤1

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

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

---

您可以尝试此操作以获取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>

var nam=$（'.checkout bar li.active'）.attr（'class'）.split（''）[1]；
控制台日志（nam）//将返回“first”作为类名，因为li
//活动类在活动后有另一个类是“第一个”

如果要获取活动元素类、内容或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;

}

---

您在

查询选择器中错过的第一件事是您没有提到
活动
类。第二件事是使用值（javascript中除了输入之外，HTML元素没有这样的属性，而是使用innerText和innerHTML属性来获取所需的内容）和条件。我想建议代码如下。但请记住
queryselector
始终创建元素数组，并始终指向第一个元素

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


您好1
你好
你好

警报（activeText（））；
函数activeText（）
{
var元素=document.querySelector（'ul.checkout-bar>li.active'）；
return（typeof元素！=“未定义”）？element.innerText:未定义；
}
如果需要元素的名称，请注意它不是字符串，也不是数组，它是一组以空格分隔的标记（标记显然是一个没有引号的字符串）。最好的方法是将其视为具有自己的集的字符串

演示
演示中评论的详细信息


/~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~设置活动（）~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*提供setActive（）函数是为了使此演示具有交互性。这不是答案的主要部分，因此我将放弃srep解释的步骤*/
/*只要单击列表项，setActive（）就会切换.active类并添加.visted类*/
document.querySelector（'.checkout bar'）。onclick=setActive；
const lis=document.queryselectoral（'li'）；
功能设置激活（e）{
如果（e.target.tagName==“LI”）{
for（设i=0；i
li{
列表样式：无；
光标：指针；
线高：2；
}
.参观{
颜色：西红柿
}
.主动{
背景：#333；
颜色：#fc0；
}
/*仅供演示之用*/
.as-console-wrapper.as-console-wrapper{
最大高度：75像素
}

首先
中等
上次
是否要返回已分配类
活动的
li
？如果是，那么您的选择器应该是
'ul.checkout-bar>li.active'
。如何定义这样的函数：
函数（）{}
？列表项没有
值（
元素.value
）步骤2中的活动类名是什么。。不应该是“下一步”吗？您仍然需要按类进行筛选：var nam=$（'.checkout bar li.active'）…问题中没有jQuery。我假设您需要返回由active
li
元素保留的
文本。让我知道这是否是必需的解决方案。
function foo() {
    var element=document.querySelector('ul.checkout-bar > li.active');
    return element ? element.classList.value : undefined;
}

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

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;

}

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