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

Question

I have list of user and their dates in PHP and onclick of specific user, I want to hide div other than one whose link is clicked For example :

 <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/>

So if $id = 8 then hide all div of class person which has id other than ' add_new_date_8 '

Answer 1

Make it simple in jquery

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

Answer 2

access id in js function. and first hide all the div with person class and then show the which have matching id.

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

Answer 3

The other solutions so far will work, however I prefer to use .siblings()

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

This will prevent the element itself from being hidden and then shown again, and might save you some headaches on animations, should you add those.

note: this depends on your HTML structure instead of classes, which is a bit less flexible. You can also use the following to exclude the element you want to show from the elements that get hidden:

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

Answer 4

You can use siblings to get the siblings of the clicked element.

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

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

Docs: http://api.jquery.com/siblings

EDIT

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