-3

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

'optionPanel' 用 display:none 隐藏。单击 showPanel() 时，会出现“optionPanel”。我想要的是'optionPanel'只出现在我点击的特定DIV上，现在它出现在所有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 的东西都会出现，我该如何解决这个问题？

谢谢。

4

2 回答 2

3

添加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();
 });
于 2013-09-12T11:36:09.890 回答
1

您可以删除内联的“onclick”处理程序并通过 jQuery 附加它

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

这只会切换被点击optionPanel的相应的a

于 2013-09-12T11:37:36.173 回答