[英]JQuery Compare Class of List Items
使用 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>
您有$class
變量,其值設置為所有列表項的 class。
由於您使用 PHP 來呈現頁面,因此您可以使用相同的變量來測試是否應該顯示按鈕。 所以在這種情況下你不需要 jQuery ,你可以刪除那部分。
這是它的樣子:
<?php
if (strpos($class, 'Completed') !== false) {
?>
<button id="steps-complete" hidden>Download Now</button>
<?php
}
?>
這適用於您的情況,因為您為所有項目設置了相同的 class。
希望這可以幫助。
您可以簡單地計算元素,看看它們是否都有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);
});
我制作了一個 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.