Question

我的HTML如下：

{# Navigation for xs screens #}
<div class="small-screen-nav hidden-lg hidden-md hidden-sm col-xs-12" style="padding: 0;">
    <ol class="breadcrumb" style="padding: 0px 7.5px">
        <li><a href="#" id="make" class="active">Make</a></li>
        <li><a href="#" id="model">Model</a></li>            
    </ol>
</div>

{# Navigation for sm, md, lg screens #}
<div id="calculation-menu" class="col-lg-2 hidden-xs">
    <div class="list-group">
        <a href="#" id="make" class="list-group-item active">Make</a>
        <a href="#" id="model" class="list-group-item">Model</a>
    </div>
</div>

我的jquery如下：

<script>
    $(document).ready(function () {
        $('#make').removeClass('active').html("Some text");
        $('#model').addClass('active');
    })
</script>

但问题是它的目标是隐藏的导航。如果我在大屏幕上，则隐藏第一个导航，但是jquery不会定位未隐藏的导航（第二个导航），但它会定位隐藏的导航（第一个）。

知道怎么解决吗？

Answer 1

确保唯一的id属性

首先，您需要考虑重命名现有的id属性as they are guaranteed to be unique by definition，因此在不是这种情况时可能会导致各种问题。

请考虑使用class属性或data-*属性来处理此问题（属性方法如下所示）：

<!-- Mobile -->
<div class="small-screen-nav hidden-lg hidden-md hidden-sm col-xs-12" style="padding: 0;">
    <ol class="breadcrumb" style="padding: 0px 7.5px">
        <li><a href="#" class="active" data-make>Make</a></li>
        <li><a href="#" data-model>Model</a></li>            
    </ol>
</div>

<!-- Small, Medium, and Large -->
<div id="calculation-menu" class="col-lg-2 hidden-xs">
    <div class="list-group">
        <a href="#" class="list-group-item active" data-make>Make</a>
        <a href="#" class="list-group-item" data-model>Model</a>
    </div>
</div>

然后您可以按预期使用它：

<script>
    $(function () {
        $('[data-make]').removeClass('active').html("Some text");
        $('[data-model]').addClass('active');
    });
</script>

考虑:visible选择器

其次，如果你真的想只定位可见的元素，你可以考虑使用jQuery中的:visible selector来处理这个问题：

// This will only target the element with the data-make attribute that is currently visible
$('[data-make]:visible')

Answer 2

重复id是一个坏主意，但如果你真的需要快速修复以定位两个元素，请使用属性选择器：

所以请使用$('#make')而不是$('[id="make"]')。

如何定位未用jquery隐藏的元素

2 个答案: