JQuery 比较列表项的 Class

Question

使用 JQuery 我想检查每个列表项是否具有 css class Complete 。 如果是这样，我想显示一个按钮，如果不是，我想隐藏按钮。

当前页面加载时，这些类是使用 PHP 动态插入的。

到目前为止，我的代码是；

<button id="steps-complete" hidden>Download Now</button>

<ul class="wb-steps">
    <li class="<?php echo $class ?>">Step 1</li>
    <li class="<?php echo $class ?>">Step 2</li>
    <li class="<?php echo $class ?>">Step 3</li>
</ul>

<script>
jQuery( document ).ready(function() {
    var steps = [];
    jQuery( ".wb-steps li" ).each(function( index ) {
        // successfully displays complete for each list item
        console.log( index + ": " + jQuery( this ).attr('class') );
        // if all stepa have 'complete' show button
        $("#steps-complete").show();
    });
});
</script>

Answer 1

您有$class变量，其值设置为所有列表项的 class。

由于您使用 PHP 来呈现页面，因此您可以使用相同的变量来测试是否应该显示按钮。 所以在这种情况下你不需要 jQuery ，你可以删除那部分。

这是它的样子：

<?php
if (strpos($class, 'Completed') !== false) {
?>
<button id="steps-complete" hidden>Download Now</button>
<?php
}
?>

这适用于您的情况，因为您为所有项目设置了相同的 class。

希望这可以帮助。

Answer 2

您可以简单地计算元素，看看它们是否都有complete的 class：

jQuery(document).ready(function() {
    var $steps = $(".wb-steps li");
    var show = $steps.length === $steps.filter('.complete').length;

    $("#steps-complete")
        .toggle(show)
        .get(0)
        .toggleAttribute('hidden', show);
});

Answer 3

我制作了一个 function 来检查wb-steps是否有一个名为 john 的 class，如果没有，那么我们显示步骤完成

 jQuery( document ).ready(function() { if($(".wb-steps").children().not('.john').length = 0){ console.log("there was a div found with a class named john"); }else{ $("#steps-complete").show(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="steps-complete" hidden>Download Now</button> <ul class="wb-steps"> <li class="<?php echo $class?>">Step 1</li> <li class="<?php echo $class?>">Step 2</li> <li class="<?php echo $class?>">Step 3</li> </ul>