0

I need to open the child class / div when click on link:

I have: 

echo '<td><a class="openhiddenmessage" href="#">'.$title.'</a></td>'; //If user clicks here
echo '<div class="hiddenmessage" style="display:none">'.$message.'</div>';  //This shows up

The problem is that theres many so I need to know which belongs to each.

Here is the JQuery:

$('.openhiddenmessage').click(function(){
   $('.hiddenmessage').show();
});

How can I get it to open ot's child?

UPDATE: For some reason none of the answers given is working so here's the whole part:

echo '<tr>';
echo '<td><a class="openhiddenmessage" href="#">'.$title.'</a></td>';
echo '<td>'.$date.'</td>';
echo '<td><a id="deletemessage" href="delete.php?id='.$id.'" class="delete">Delete</a></td>';
echo '<div class="hiddenmessage" style="display:none">'.$message.'</div>';  
echo '</tr>';
4

4 回答 4

2

最接近()搜索 DOM 树，您将需要类似

$('.openhiddenmessage').click(function () {
  $(this).closest('tr').find('.hiddenmessage').show();
});

编辑：您的初始 HTML 的jsFiddle

于 2013-07-10T15:20:51.057 回答
1

尝试...

$('.openhiddenmessage').click(function(e){
 e.preventDefault();
$(this).closest('div').show();
});

我个人会用 id 来做这件事……如果你从数据库中得到结果。

 echo '<td><a class="openhiddenmessage" data-id="'.$id.'" href="#">'.$title.'</a></td>'; //If user clicks here
 echo '<div class="hiddenmessage" id="msg-'.$id.'" style="display:none">'.$message.'</div>';

然后...

  $('.openhiddenmessage').click(function(e){
   e.preventDefault();
  $('#msg-'+$(this).data('id')).show();
});

这样，您就不会被限制在表格中。它可能在任何地方。即使是模态样式的弹出窗口也是可能的

于 2013-07-10T15:18:07.130 回答
1

看起来你有div一个tr无效的内部，你应该把你的 div 放在 td 里面，

不过，您可以以当前的形式执行此操作

$('.openhiddenmessage').click(function(){
   $(this).closest('td').next('.hiddenmessage').show();
});
于 2013-07-10T15:19:27.620 回答
1

你可以把divnext放进去a，td然后你就可以用它next()来显示消息了。这种方式class不需要额外的div。例子：

HTML

<td>
    <a class="openhiddenmessage" href="#">Title</a>
    <div style="display:none">Message</div>
</td>

或者你的 PHP 代码

echo '<td>' . 
        '<a class="openhiddenmessage" href="#">' . $title . '</a>' .
        '<div style="display:none">' . $message . '</div>' .
    '<td>';

JS

$('.openhiddenmessage').click(function(e){
    e.preventDefault();
    $(this).next().show();
});

jsFiddle

于 2013-07-10T15:39:21.177 回答