toggleClass, чтобы показать/скрыть DIV не работает со вторым элементом

Question

Моя цель:

1. имеют набор миниатюр.
2. Нажмите на миниатюру toggleClass hiddenElement и покажите большое изображение внутри div, который скрыт.
3. Щелкните в любом месте DOM, и он скроет или разрешит пользователю переключиться на следующий div (если щелкнул значок миниатюры № 2).

Проблема:

Моя проблема появилась, когда я добавил свой removeClass в моей JQuery. Я думаю, что это мешает моему toggleClass, но я не совсем уверен, правильно ли я его структурировал. Поэтому, когда пользователь нажимает на большое изображение или где-либо в DOM, он не может переключать класс.

Моя структура DOM:

<div class="wrap"> 

    <!-- Hidden elements --> 

     <div id="port1_large" class="hiddenElement"> 
      <img src="assets/portfolio-images/portfolio_content/project1.jpg"> 
     </div> 

     <div id="port2_large" class="hiddenElement"> 
      <img src="assets/portfolio-images/portfolio_content/project2.jpg"> 
     </div> 

    <!-- /Hidden elements --> 

    <!-- Thumbnails --> 

      <div id="portfolio"> 
       <ul class="portfolio-grid"> 
        <li> 
         <a id="port1_thumb" target="portfolio"> 
          <img src="assets/portfolio-images/portfolio_thumbnails/thumbnail_1.png" alt="img01"/> 
          <h3>Project 1</h3> 
         </a> 
        </li> 
        <li> 
         <a id="port2_thumb" 
          target="portfolio"> 
          <img src="assets/portfolio-images/portfolio_thumbnails/thumbnail_2.png" alt="img01"/> 
          <h3>Project 2</h3> 
         </a> 
        </li> 
       </ul> 
      </div> 
</div> 

Мой JQuery:

$("#port1_thumb, #port1_large").on("click", function() { 
    $("#port1_thumb, #port1_large").toggleClass("hiddenElement"); 
}); 

$('document').click(function() { 
     $('#port1_large').removeClass('hiddenElement'); 
}); 

$("#port2_thumb, #port2_large").on("click", function() { 
    $("#port2_thumb, #port2_large").toggleClass("hiddenElement"); 
}); 

$('document').click(function() { 
     $('#port2_large').removeClass('hiddenElement'); 
}); 

Примечания:

У меня есть CSS для .hiddenElement набора на 'дисплей: нет' ,

Я заметил, что у меня много СУХОЙ, но в настоящее время это единственный способ, которым я знаю, как это сделать.

Что я могу сделать лучше в своем jQuery?

Если у вас есть сообщение, которое отвечает на мои извинения, пожалуйста, направьте меня на надлежащую должность, я не смог найти то, что искал. Спасибо за ваше время.

Answer 1

Вы можете попробовать использовать объединить document пунктКодЧтобы

Кроме того, после не правильно

$('document') 

Это должно быть как ниже

$(document) 

Правильный JQuery код:

$(document).click(function() { 
    $('#port1_large').removeClass('hiddenElement'); 
    $('#port2_large').removeClass('hiddenElement'); 
}); 

$("#port1_thumb, #port1_large").on("click", function() { 
    $("#port1_thumb, #port1_large").toggleClass("hiddenElement"); 
}); 

$("#port2_thumb, #port2_large").on("click", function() { 
    $("#port2_thumb, #port2_large").toggleClass("hiddenElement"); 
}); 

Answer 2

Он работает правильно для меня

$("#port1_thumb, #port1_large").on("click", function() { 
 
    $("#port1_thumb, #port1_large").toggleClass("hiddenElement"); 
 
}); 
 

 
$('document').click(function() { 
 
    $('#port1_large').removeClass('hiddenElement'); 
 
}); 
 

 
$("#port2_thumb, #port2_large").on("click", function() { 
 
    $("#port2_thumb, #port2_large").toggleClass("hiddenElement"); 
 
}); 
 

 
$('document').click(function() { 
 
    $('#port2_large').removeClass('hiddenElement'); 
 
});

.hiddenElement { display: none; }

<div class="wrap"> 
 

 
<!-- Hidden elements --> 
 

 
    <div id="port1_large" class="hiddenElement"> 
 
     <img src="http://lorempixel.com/400/200/"> 
 
    </div> 
 

 
    <div id="port2_large" class="hiddenElement"> 
 
     <img src="http://lorempixel.com/400/200/"> 
 
    </div> 
 

 
<!-- /Hidden elements --> 
 

 
<!-- Thumbnails --> 
 

 
     <div id="portfolio"> 
 
      <ul class="portfolio-grid"> 
 
       <li> 
 
        <a id="port1_thumb" target="portfolio"> 
 
         <img src="http://lorempixel.com/32/32/" alt="img01"/> 
 
         <h3>Project 1</h3> 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a id="port2_thumb" 
 
         target="portfolio"> 
 
         <img src="http://lorempixel.com/32/32/" alt="img01"/> 
 
         <h3>Project 2</h3> 
 
        </a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>