Question

我正在尝试检查链接是否包含＆＃34; current＆＃34;然后我需要执行一些动作。链接具有自定义属性＆＃34; 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"包含类＆＃34;当前＆＃34;

时，我才需要在jquery或javascript中执行一些操作

欢迎任何建议

Answer 1

根据海报反馈编辑回复：

$(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/

Answer 2

＆＃13;

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 
    }
  }
});

＆＃13;

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

＆＃13;

您将看不到此功能的结果，而不是在我评论的区域中添加警报。此脚本检查data-step属性，并检查另一个设置为＆＃34; 3＆＃34;如果他们包含班级＆＃34;当前＆＃34; （变量class_name）。

如何检查链接中是否存在类？

2 个答案: