Отображение определенного содержимого миниатюр при нажатии

Question

У меня возникла проблема: каждый раз, когда я нажимаю на миниатюру, он отображает меня, но в этом случае он отображает меня в два раза или в моем первоначальном проекте 6 раз. Мне удалось сделать заголовок проекта прочитанным, но я изо всех сил пытаюсь отобразить описание проекта, которое находится в .project [x], и отображать его только один раз, теперь он дает мне spinner и название проекта 2 раза (или 6 в оригинальной версии). Я понял, что проблема в моем разделе об обработке, но я пока не могу определить или исправить эту проблему.

После того, как вы столкнулись с разметкой html и JS, я закончил с этим, я считаю, что это ближе к моему решению. Теперь он показывает только 1 имя (правильно для каждой миниатюры), и каждый эскиз показывает все классы (вертушка/project1/project2)

пример при нажатии на первой миниатюре: http://i.imgur.com/SiEuZtH.png

HTML разметка:

<div class="work-belt"> 
     <div class="thumb-wrap"> 
      <div class="thumb-container"> 
       <a href="#/" class="thumb-unit"> 
        <div data-class="project1" class="thumb-overlay"> 
         <strong>Name1</strong> 
        </div> 
       </a> 
       <a href="#/" class="thumb-unit"> 
        <div data-class="project2" class="thumb-overlay"> 
         <strong>Name2</strong> 
        </div> 
       </a> 
      </div> 
     </div> 

     <div class="work-wrap"> 
      <div class="work-container"> 
       <h4 class="project-title"></h4> 
       <div class="project-load"></div> 
       <div class="project1"> 
        <div style="width: 600px; height: 500px; background: #aaa;"></div> 
        <p>1st description</p> 
       </div> 
       <div class="project2"> 
        <div style="width: 600px; height: 500px; background: #000;"></div> 
        <p>2nd description</p> 
       </div> 
      </div> 
     </div> 

    </div> <!-- Ending of work-belt --> 

JS разметки:

функция WORKLOAD() {

$.ajaxSetup({ cache: false }); 

$('.thumb-overlay').click(function() { 

    var $this = $(this), 
      newTitle = $this.find('strong').text(), 
      newClass = $this.data('class'), 
      spinner = '<div class="loader">Loading...</div>', 
      newWork = '<div class="project-load">'+ newClass +'</div>'; 
    $('.project-load').html(spinner).load(newWork); 
    $('.project-title').text(newTitle); 

}); 

}

Answer 1

Ваш HTML-код содержит два div с class = "project-load". Удалите все, что вам не нужно.

jQuery меняет каждый $ ('. Project-load'), который он может найти.

Answer 2

Таким образом, мне предоставили ответ на мое решение. Оказывается, мне даже не нужен прядильщик (глупый я), так как очевидно, что вам это не нужно, если информация вводится напрямую. Во-вторых, я должен был сделать все дивы проекта скрыты в моем ШАОН, который я пропустил в начале, так:

SASS: 
    [class^='projectc'] 
     display: none 

< - Примечание в моем случае я должен был изменить данные имя атрибута и переименовать дивы проект так, что название будут затронуты ->

<a href="#/" id="1" class="thumb-unit"> 
    <div data-class="projectc1" class="thumb-overlay"> 
    <strong>Name1</strong> 
    </div> 
</a> 
<a href="#/" id="2" class="thumb-unit"> 
    <div data-class="projectc2" class="thumb-overlay"> 
    <strong>Name2</strong> 
    </div> 
</a> 

...

<h4 class="project-title"></h4> 
    <!— <div class="project-load"></div> — Remove --> 
    <div class="projectc1"> 
     <div style="width: 600px; height: 500px; background: #aaa;"></div> 
     <p>1st description</p> 
    </div> 

ЯШ:

function workLoad() { 

    $.ajaxSetup({ cache: false }); 

    $('.thumb-overlay').click(function() { 

    var $this = $(this), 
     newTitle = $this.find('strong').text(), 
     newClass = $this.data('class'); 
    // $('.project-load').load(newClass); -- Remove 
    $("[class^='projectc']").css('display', 'none'); 
    $(newClass).css('display', 'block'); 
    $('.project-title').text(newTitle); 

}); 
}