Question

我有一些HTML，它以两种方式之一显示：

<div class="map-toggle">
   <span class="list-view-toggle" data-status="active">List</span>
   <span class="map-view-toggle" data-status="inactive">Map</span>
</div>

或

<div class="map-toggle">
   <span class="list-view-toggle" data-status="active">List</span>
   <span class="map-view-toggle" data-status="inactive">Map</span>
</div>

在一个区块中，.list-view-toggle有一个data-status属性active，而另一个inactive有.map-view-toggle，反之亦然span

我想运行一些jQuery，它只是找到.map-toggle中var whichView = $('.map-toggle > span').attr('data-status','active').attr('class'); console.log(whichView);具有活动类的哪个whichView，并为我找到console.log。

list-view-toggle

因此，如果页面上显示第一个块，active应该返回data-status="active"。

但是，我发现它似乎应用数据状态属性def sandwich(bread, meat='ham', cheese='american'): if meat == None and cheese == None: return '{} bread sandwich with turkey'.format(bread) return '{} bread sandwich with {} and {} cheese'.format(bread, meat, cheese)，而不是在变量中定位和输出。因此，它加载页面并使两个跨度{{1}}显然不是我所追求的。

如何以最短的代码返回有效范围的类名？

Answer 1

您可以使用jQuery的attribute-selector：

var whichView = $('.map-toggle > span[data-status="active"]').attr('class');

<强> Demo

Answer 2

如果使用filter()方法设置数据属性，请使用data()。下面显示了在一个小演示中运行的两种方式

$(".map-toggle").on("click", "span", function () {
    $(this).data("status", "active").siblings().data("status", "inactive");
    test();
});



function test () {
    var whichView = $('.map-toggle > span')
                        .filter(function(){
                            return $(this).data("status") ==='active';
                        }).attr('class');
    console.log("filter way:" + whichView);
    //Other solution works on initial render, but fails when set with data().
    console.log("attribute way: " + $('.map-toggle > span[data-status="active"]').attr("class"));
}

test();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-toggle">
   <span class="list-view-toggle" data-status="active">List</span>
   <span class="map-view-toggle" data-status="inactive">Map</span>
</div>

Answer 3

如果可能的话，我建议您使用以下标记，因为它使一切变得更容易，更容易理解。你也在谈论类，而不是属性（[...]跨越.map-toggle有活跃的类 [...]）

<div class="map-toggle">
    <span class="list-view-toggle active">List</span>
    <span class="map-view-toggle inactive">Map</span>
</div>

您需要的选择器是：

$('.map-toggle > span.active')

否则我喜欢@ empiric的解决方案。

获取span的classname，其中data- *被设置为特定字符串

3 个答案: