如何使用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

希望这会帮助你。