如何使用jquery彈出標籤名稱？

Question

我使用jQuery來從被檢查，如果未選中該行，它不應該跳出一排蹦出標籤的名字，但它是上彈出了所有3行

HTML代碼：

<table> 
<tr> 
    <td>APPLICATION | </td> 
    <td>ENV | </td> 
    <td>REGION | </td> 
    <td>URL | </td> 
<td><input type="button" value="Edit" class="edit"> 
<input type="button" value="Update" class="update"> 
<input type="reset" value="Reset" class="reset"> </td>  
</tr> 
<tr> 
<td><label class='applabel'>app1</label> <input type="text" class="app" hidden></td> 
    <td>env1 | </td> 
    <td>region1 | </td> 
    <td>url1 | </td> 
    <td><input type="checkbox" class="ed-up"></td> 
</tr> 
<tr> 
    <td><label class='applabel'>app2</label> <input type="text" class="app" hidden></td> 
    <td>env2 | </td> 
    <td>region2 | </td> 
    <td>url2 | </td> 
    <td><input type="checkbox" class="ed-up"></td> 
</tr> 
<tr> 
    <td><label class='applabel'>app3</label> <input type="text" class="app" hidden> </td> 
    <td>env3 | </td> 
    <td>region3 | </td> 
    <td>url3 | </td> 
    <td><input type="checkbox" class="ed-up"></td> 
</tr> 
</table>  

javascript代碼：

$(function() { 

$('.reset').on('click',function() { 
    $(':checkbox').prop('checked',false); 
    $(':text').hide(); 
    $('.applabel').show(); 
}); 

$('.edit').on('click',function() { 
    $('.ed-up').each(function(){ 
     if($('.ed-up').prop('checked') == true) 
     alert($(this).next('.applabel').text()); 

    }); 
}); 

});    

我使用各種方法來遍歷行，但是，想要蹦出我的意思是警告該行只有當複選框被選中

FIDDLE

Answer 1

考慮以下幾點：$(this).closest('tr').find('.applabel').text()

$('.edit').on('click',function() { 
    $('.ed-up').each(function(){ 
     if($(this).prop('checked') == true) 
     alert($(this).closest('tr').find('.applabel').text()); 
    }); 
}); 

Updated DEMO

---

變化

if($('.ed-up').prop('checked') == true) 
//changed to 
if($(this).prop('checked') == true) 

---

alert($(this).next('.applabel').text()); 
//changed to 
alert($(this).closest('tr').find('.applabel').text()); 

Answer 2

您沒有使用.each()傳遞給函數的上下文。

下面的行：

if($('.ed-up').prop('checked') == true) 

只檢查第一匹配.ed-up的.checked屬性。您應該使用this：

if($(this).prop('checked') == true) 

Answer 3

請嘗試此代碼。

$(function() { 
    $('.reset').on('click',function() { 
    $(':checkbox').prop('checked',false); 
    $(':text').hide(); 
    $('.applabel').show(); 
    }); 

    $('.edit').on('click',function() { 
    $('.ed-up').each(function(){ 
     if($(this).prop('checked') == true) 
      alert($(this).closest('tr').find('.applabel').text()); 
    }); 
    }); 
}); 

Fiddle

希望這會幫助你。