如何根据数据属性隐藏div

Question

我尝试了以下代码，但无法正常工作。我认为slick-index引起了问题。

<div class="class1 class2" data-slick-index="1">
<a href="#" class="active" rel="">
My Text1
</a>
</div>

<div class="class1 class2" data-slick-index="2">
<a href="#" class="active" rel="">
My Text2
</a>
</div>

<div class="class1 class2" data-slick-index="3">
<a href="#" class="active" rel="">
My Text3
</a>
</div>

$(document).ready(function() {
$('div.class1').hide().filter(function(){
    var d = $(this).data();
    alert(d.slick-index);
    return d.slick-index == '3';
}).hide();

});

代码中的问题出在哪里。

Answer 1

更正您的代码，检查：

$(document).ready(function() {
$('div.class1').filter(function(){
    return $(this).attr('data-slick-index') == '3';
}).hide();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1 class2" data-slick-index="1">
<a href="#" class="active" rel="">
My Text1
</a>
</div>

<div class="class1 class2" data-slick-index="2">
<a href="#" class="active" rel="">
My Text2
</a>
</div>

<div class="class1 class2" data-slick-index="3">
<a href="#" class="active" rel="">
My Text3
</a>
</div>

Answer 2

您必须使用d["slickIndex"]

$(this).data()将data-slick-index转换为slickIndex

演示

$(document).ready(function() {
  $('div.class1').filter(function() {
    var d = $(this).data();
    console.log(d["slickIndex"]);
    return d["slickIndex"] == 3;
  }).hide();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1 class2" data-slick-index="1">
  <a href="#" class="active" rel="">
My Text1
</a>
</div>

<div class="class1 class2" data-slick-index="2">
  <a href="#" class="active" rel="">
My Text2
</a>
</div>

<div class="class1 class2" data-slick-index="3">
  <a href="#" class="active" rel="">
My Text3
</a>
</div>

Answer 3

您给出的数据attr是错误的，

jQuery: get data attribute

      $(document).ready(function() {
        $('div.class1').filter(function(){
          var d = $(this).data('slick-index');
          return d == '3';
        }).hide();
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1 class2" data-slick-index="1">
<a href="#" class="active" rel="">
My Text1
</a>
</div>

<div class="class1 class2" data-slick-index="2">
<a href="#" class="active" rel="">
My Text2
</a>
</div>

<div class="class1 class2" data-slick-index="3">
<a href="#" class="active" rel="">
My Text3
</a>
</div>

Answer 4

请注意：如果只是隐藏，您可以使用CSS。

.class1.class2[data-slick-index="3"]{
    display: none;
}