如何检查一个类是否存在于链接中

how to check if a class exist in a link?

本文关键字：于链接 存在 是否 链接 何检查 检查 一个      更新时间：2023-09-26

我试图检查一个条件，如果一个链接包含" current "类，那么我需要执行一些操作。链接有一个自定义属性" data-step" .

当data-step="3"将包含一个类电流时，我需要执行一些操作。

链接在这里:

<a href="#" data-step="1" class="multistep_section">login</a>
<a href="#" data-step="2" class="multistep_section">billing address</a>
<a href="#" data-step="3" class="current multistep_section">Shipping Address</a>
<a href="#" data-step="4" class="multistep_section">payment</a>
<a href="#" data-step="5" class="multistep_section">order review</a>

类电流是可变的，并根据步骤变化。只有当data-step="3"包含类"当前"

时，我需要在jquery或javascript中做一些操作

欢迎提出任何建议

根据海报反馈编辑回复:

$(document).ready(function(){
    if ($('a[data-step=3]').hasClass('current')){
         // Current class exists on data-step 3  
    }
});

和纯JS:

(function(){
    var elements = document.querySelectorAll('[data-step]');
    var targetElement;
    for (var i = 0; i < elements.length; i++){
        if (elements[i].getAttribute('data-step') == 3){
             targetElement = elements[i];    
        }
    }
    if (targetElement.classList.contains('current')){
        alert("Has current class");   
    }
})();

参见纯JS示例:http://jsfiddle.net/19tmab49/4/

document.addEventListener("DOMContentLoaded", function(event) {
  var links = document.getElementsByTagName("a");
  var class_name = "current";
  
  // if element is contained in an array (function)
  function isInArray(value, array) {
    return array.indexOf(value) > -1;
  }
  
  for(var i = 0; i < links.length; i++) {
    var tempLink = links[i]; // represents each links
    var dataStep_value = tempLink.getAttribute("data-step"); // getting "data-step" value
 
    var classes = tempLink.className.split(" ");
      
    if (isInArray(class_name, classes)) {
      // current is in array, do whatever you need to 
    }
  }
});
<a href="#" data-step="1" class="multistep_section">login</a>
<a href="#" data-step="2" class="multistep_section">billing address</a>
<a href="#" data-step="3" class="current multistep_section">Shipping Address</a>
<a href="#" data-step="4" class="multistep_section">payment</a>
<a href="#" data-step="5" class="multistep_section">order review</a>

您将不会看到这个函数的结果，而是在我注释的区域添加一个警告。这个脚本检查data-step属性，如果它们包含类"current"(变量class_name)，则检查另一个设置为"3"的时间。

相关文章：