Question

我有这行HTML：

<li class="col-xs-6 col-sm-6 col-md-2 filter active" data-filter=".office">

我想检查一下 ".filter"有类".active"，如果它有活动类，那么我需要获取其数据属性。我试过这样，但它提醒未定义

if($(".filter").hasClass("active")) {

    var activeFilter = $(this).attr("data-filter");
    alert(activeFilter);
}

我做错了什么？

Answer 1

其中this不是指可能引用window对象或任何其他上下文的元素。要使其工作，请缓存元素引用（jQuery对象）并在缓存对象上执行其余操作。

var $ele = $(".filter");
if($ele.hasClass("active")) {
    var activeFilter = $ele.attr("data-filter");
    alert(activeFilter);
}

＆＃13;

var $ele = $(".filter");
if ($ele.hasClass("active")) {
  var activeFilter = $ele.attr("data-filter");
  alert(activeFilter);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="col-xs-6 col-sm-6 col-md-2 filter active" data-filter=".office"></li>
</ul>

＆＃13;

如果有多个元素，则使用each()方法，您可以在回调中使用此关键字引用当前元素。

$(".filter").each(function(){
  if($(this).hasClass("active")) {
    var activeFilter = $(this).attr("data-filter");
    alert(activeFilter);
  }
})

＆＃13;

$(".filter").each(function() {
  if ($(this).hasClass("active")) {
    var activeFilter = $(this).attr("data-filter");
    alert(activeFilter);
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="col-xs-6 col-sm-6 col-md-2 filter active" data-filter=".office"></li>
</ul>

＆＃13;

如何检查元素是否有类

1 个答案: