Как связать действия со ссылками в jQuery?

Question

Я работаю над веб-сайтом, на котором есть страница с миниатюрами для навигации, и для каждого человека, которого вы щелкаете, его профиль отображается в том же окне. Затем, нажав «закрыть» в нижней части профиля, вы вернетесь к миниатюрам.

Пока у меня есть следующие div ...

<div class="container">

    <div class="thumbnails"></div>
    <div id="profile-1"></div>
    <div id="profile-2"></div>
    <div id="profile-3"></div>
    <div id="profile-4"></div>

<div>

Внутри div с именем "people" у меня есть ...

<ul>
    <li class="thumbnail-1"><a href="#">Profile 1</a></li>
    <li class="thumbnail-2"><a href="#">Profile 2</a></li>
    <li class="thumbnail-3"><a href="#">Profile 3</a></li>
    <li class="thumbnail-4"><a href="#">Profile 4</a></li>
</ul>

Я думал, что все элементы div должны располагаться так, чтобы они располагались друг над другом, а затем скрывать все профили при загрузке документа.

Затем при нажатии на миниатюру привязывают отображение: блок и z-index: 100 к соответствующему профилю, заставляя профиль отображаться поверх миниатюр.

Мой вопрос: будет ли это лучшим способом сделать это? Какой jquery мне понадобится, чтобы сгенерировать это поведение, чтобы оно удаляло свойства css, созданные при нажатии кнопки закрытия?

Большое спасибо за ваше время и помощь.

Answer 1

Не делай этого. Просто покажите / скройте их, как вам нужно:

$("#thumbnails a").click(function() {
  var id = "profile" + this.id.substring(1);
  $("#container").children().hide();
  $("#" + id).show();
  return false;
});

при условии, что это немного изменило:

<div id="container">
  <div class="thumbnails"></div>
  <div id="profile-1"></div>
  <div id="profile-2"></div>
  <div id="profile-3"></div>
  <div id="profile-4"></div>
<div>

и

<ul id="thumbnails">
  <li><a id="t-1" href="#">Profile 1</a></li>
  <li><a id="t-2" href="#">Profile 2</a></li>
  <li><a id="t-3" href="#">Profile 3</a></li>
  <li><a id="t-4" href="#">Profile 4</a></li>
</ul>

Причина этого в том, что вы хотите разместить как можно меньше маркера HTML. Кроме того, вы можете изменить это, удалив идентификаторы из ссылок, если предположите, что можете вывести идентификатор из позиции в списке. Это только одно возможное изменение.

Использование идентификаторов представляется целесообразным, когда вы отмечаете элементы страницы, такие как контейнер и миниатюры. Плюс поиск идентификатора намного, намного быстрее, чем альтернативы.

Answer 2

Вы также можете попробовать изменить свой HTML таким образом, чтобы профиль и миниатюра находились в одной конструкции.

<ul>
    <li class="person">
        <div class="thumbnail"></div>
        <div class="profile"></div>
    </li>
</ul>

Вы можете по-прежнему использовать абсолютное позиционирование для div.profile: s, но ваш javascript будет проще (без каких-либо манипуляций со строками), так как вам нужно только найти элемент-брат.

$('div.thumbnail').click(
    $('div.profile').removeClass('visible'); // hide any visible profiles
    $(this).siblings('div.profile').addClass('visible'); // show the adjacent profile
);

(В приведенном выше примере предполагается, что для отображения профиля используется div.profile.visible css-класс.)

Answer 3

Попробуйте Демо

Я только что понял, что вы хотите получить полную противоположность тому, что я изначально обозначил, но для одного: было бы хорошо назвать ваш идентификатор ваших делителей точным именем для вашего тега привязки в виде текста, и также для того, чтобы иметь текст для нажатия на что-то, он должен быть внутри вашего div:

<div id="container">
 <div class="thumbnails"></div>//I don't even use this, so if you don't use it for something else you can get rid of this line
 <div id="Profile-1">first one</div>
 <div id="Profile-2">second one</div>
 <div id="Profile-3">third one</div>
 <div id="Profile-4">fourth one</div>
</div>
<ul id="thumbnails">
 <li><a href="#">Profile-1</a></li>
 <li><a href="#">Profile-2</a></li>
 <li><a href="#">Profile-3</a></li>
 <li><a href="#">Profile-4</a></li>
</ul>

$(function(){
 $('#container').hide(); //hide the links in the list
 $('#thumbnails a').click(function(){  // bind the li's click event
 var id = $(this).text();
 $("#container div").each(function() {
   if($(this).attr("id") == id)
   {
    $(this).show().parent().show();
   } 
   else
   {
     $(this).hide();
   }
  });
 });
});