Question

我正在创建一个DIV列表，每个DIV都从我的db中填充。我使用一些顶点来获取数据，

使用display：none隐藏

'optionPanel'。单击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();
};

有人会有任何建议吗？

显然，现在，任何带有类名选项Panel的东西都会出现，我该如何解决这个问题？

感谢。

Answer 1

为您的onclick处理程序添加this引用试试这个

<强> 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的{{1}}

选择特定的动态元素。 jQuery / HTML

2 个答案: