jQuery - 查找最近的元素并替换文字

Question

我有顶部的more链接的员工列表。

如果我点击更多信息链接，我想获得相关元素，并在底部显示的值...

Online Demo

请看看下面的代码并指导我？

$(document).ready(function(){ 

    var empName = $(this).closest('.emp-details').find('.ename').text(); 
    var empDesignation = $(this).closest('.emp-details').find('.edesignation').text(); 
    $('.more-info').on('click', function(){ 
    $('#info-container').show(); 
    $('#info-container #empname').text(empName); 
    $('#info-container #designation').text(empDesignation); 
    }); 

}); 

Answer 1

你需要得到的每次点击more info按钮empName和empDesignation值。这意味着，您需要在more-info点击事件中设置这些变量。

$(document).ready(function() { 
    $('.more-info').on('click', function() { 
    var parent = $(this).closest('.emp-details') 
    var empName = parent.find('.ename').text(); 
    var empDesignation = parent.find('.edesignation').text(); 
    $('#info-container').show(); 
    $('#empname').text(empName); 
    $('#designation').text(empDesignation); 
    }) 
}); 

Fiddle