Question

我有PHP用户及其日期列表和特定用户的onclick，我想隐藏除了点击其链接的div之外的div 例如：

 <div class='person' id='add_new_date_8' style='display:none;'>
 <div class='person' id='add_new_date_9' style='display:none;'>
 <div class='person' id='add_new_date_10' style='display:none;'>

<a href='javascript:void(0)' onclick="addMydate('<?PHP echo $id;?>')">Add a new Date?<a/>

因此，如果$id = 8，则隐藏ID为“person”之外的所有div add_new_date_8的div

Answer 1

在jquery中简化

$(document).on('click', '.person', function() {
   $('.person').hide();
   $(this).show();
});

Answer 2

在js函数中访问id。然后首先用person类隐藏所有div，然后显示哪个具有匹配的id。

function addMydate(id){
      $('.person').hide();
      $('#add_new_date_'+id).show();
    }

Answer 3

到目前为止，其他解决方案都有效，但我更喜欢使用.siblings（）

function addMydate(id){
  var selectedEl = $('#add_new_date'+id);
  selectedEl.siblings().hide(); //siblings() takes all other elements of the same parent
  selectedEl.show();
}

这样可以防止元素本身被隐藏，然后再次显示，如果添加动画，可能会让您对动画感到头疼。

注意：这取决于您的HTML结构而不是类，这有点不太灵活。您还可以使用以下内容从要隐藏的元素中排除要显示的元素：

$('.person').not('#add_new_date'+id).hide()

Answer 4

您可以使用siblings获取所点击元素的兄弟姐妹。

$(document).on('click', '.person', function() {
    $(this).show().siblings('.person').hide();
});

获取匹配元素集中每个元素的兄弟元素，可选择通过选择器进行过滤。

文档：http://api.jquery.com/siblings

修改

function addMydate(userId) { $('#add_new_date_' + userId).show().siblings('.person').hide(); }

隐藏除了单击之外的所有其他div

4 个答案: