Скрыть все остальные Div, кроме одной, которая кликали

Question

У меня есть список пользователей и их даты в PHP и OnClick конкретного пользователя, я хочу, чтобы скрыть 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 затем скрыть все DIV класса person который имеет идентификатор, кроме «add_new_date_8»

Answer 1

Идентификатор доступа в функции js. и сначала скрыть все div с помощью класса person, а затем показать, у кого есть соответствующий идентификатор.

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

Answer 2

Сделать это просто в JQuery

$(document).on('click', '.person', function() { 
    $('.person').hide(); 
    $(this).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(); 
}); 

Получить братьев каждого элемента в наборе соответствующих элементов, при необходимости отфильтрованы с помощью селектора.

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

EDIT

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