如何在同一個jQuery函數中獲得不同范圍的值？

Question

我有以下代碼：

PHP：

<?php if ($row['Status'] == 'In Process'):?>                                    
    <span class="badge" style="background-color:#67A6DF">In Process</span>                                  
<?php endif; ?>
<?php if ($row['Status'] == 'Test'): ?>
    <span class="badge" style="background-color:#FCB529">In Test</span>
<?php endif;?>
<?php if ($row['Status'] == 'Approved'):?>
    <span class="badge" style="background-color:#43A995">Approved</span>                                                            
<?php endif;?>

jQuery的：

$(document).ready(function() {
    $('.approved').on('click', function(){
        var process = $('.badge').html();       
        alert(process);     
    });//Onclick
});

按鍵：

<a href="javascript:void(0);" class="flex-icon approved" data-toggle="tooltip" data-placement="top" title="approve" data="5"><i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i></a>

我正在嘗試獲取<span>標記的文本，但是每次嘗試獲取它時，它都會發出相同文本的警報。

如何在同一個jQuery函數中獲取不同<span>標簽的值？

Answer 1

嘗試如下更改jQuery

$(document).ready(function() {
    $('.approved').on('click', function(){
        $('span.badge').each(function() {
            alert( $(this).html());
        });       

    });//Onclick
});