Выбор конкретных динамических элементов. jQuery/HTML

Question

Я создаю список DIV, с каждым DIV, заполненным из моего db. Я использую некоторую вершину, чтобы захватить мои данные,

'optionPanel' скрыт с отображением: none. Когда нажимается showPanel(), появляется «optionPanel». То, что я хочу, заключается в том, что «optionPanel» появляется только на конкретном клике DIV, сейчас он появляется на всех из них.

<a data-ajax="false" onclick="showPanel();" class="job"> 
<div class="details"> 
    <span class="name">Name</span><span class="value">{! contact.salutation + ' ' + contact.firstname + ' ' + contact.lastname }</span><br></br> 
    <span class="name">Title</span><span class="value">{! contact.title}</span><br></br> 
    <span class="dep">Department</span><span class="value">{! contact.department}</span><br></br> 
    <div class="optionPanel">{! contact.phone}</div> 
</div> 
</a> 

Моя функция довольно простой прямо сейчас,

function showPanel(){ 
    $('.optionPanel').toggle(); 
}; 

Кто-нибудь есть какие-либо предложения?

Очевидно, прямо сейчас, что-нибудь с именем класса optionPanel появится, как мне обойти это?

Спасибо.

Answer 1

добавить this ссылку на ваш OnClick обработчик попробовать этот

HTML

<a data-ajax="false" onclick="showPanel(this);" class="job"> 
         //---------------^^^^---here 

JQuery

function showPanel(obj){ 
     $(obj).find('div.optionPanel').toggle(); 
    }; 

ИЛИ избегая инлайн функции

$('a.job').click(function(){ 
    $(this).find('div.optionPanel').toggle(); 
}); 

Answer 2

Вы можете удалить встроенный «onclick` обработчика и прикрепить его с помощью JQuery

$(".job").on("click",function(){ 
    $(this).find(".optionPanel").toggle() 
}) 

Это будет только переключить optionPanel для соответствующего a, что кликнули