使用jQuery动态获取display:block状态元素的data-index值并弹窗显示的技术问题

嘿，我明白你的需求啦——你现在的代码问题在于，$('.test')会选中所有class为test的元素，但直接调用.data('index')只会返回第一个匹配元素的属性值，所以你拿到的是0，而不是那个display:block的元素的1。

下面给你两种靠谱的解决方案：

方案1：使用:visible选择器（简洁版） #

如果你的场景中，display:block的元素就是唯一可见的元素（没有其他可见的同class元素），可以直接用:visible选择器筛选：

var visibleItemIndex = $('.test:visible').data('index');
alert(visibleItemIndex); // 这里会弹出1

方案2：精准筛选display:block的元素（严格版） #

如果你需要严格匹配style属性为display:block的元素（避免误选其他可见类型的元素，比如display:inline-block），可以用.filter()方法自定义筛选逻辑：

var targetItemIndex = $('.test').filter(function() {
  // 检查当前元素的display样式是否为block
  return $(this).css('display') === 'block';
}).data('index');
alert(targetItemIndex); // 同样会弹出1

额外提示：处理多个display:block元素的情况 #

如果页面中可能存在多个display:block的.test元素，上面的方法只会取第一个的data-index。要是想把所有符合条件的都弹窗显示，可以用.each()遍历：

$('.test').filter(function() {
  return $(this).css('display') === 'block';
}).each(function() {
  alert($(this).data('index'));
});

完整可运行代码 #

把修正后的代码整合到你的HTML里，就是这样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="test" style="display:none" data-index="0" href="#">foo!</a>
<a class="test" style="display:block" data-index="1" href="#">foo!</a>
<a class="test" style="display:none" data-index="2" href="#">foo!</a>

<script>
// 这里用严格版的筛选逻辑
var targetItemIndex = $('.test').filter(function() {
  return $(this).css('display') === 'block';
}).data('index');
alert(targetItemIndex);
</script>

内容的提问来源于stack exchange，提问作者Luis