이미지 클릭시 div의 숨겨진 콘텐츠를로드 할 수 없습니다.

Question

---

이미지를 클릭하고 해당 이미지와 관련된 콘텐츠를로드 할 때까지 콘텐츠를 숨기려고합니다. 내 CSS에 .hideDiv 클래스가 할

$("img").on('click',function(){ 
     var hello = $(this).attr('data-id'); 
     $('.hideDivs').hide(); 
     $('#'+hello).show(); 
});  

:

이

HTML이 :

<div class="projects"> 
    <h2>Newest Projects</h2> 
    <p>Here are some of my newest works.</p> 
    <div class="project-image"> 
     <div class="overlay"> 
      <p>&Design</p> 
      <p>Development</p> 
     </div> 
     <img src="images/anddesignedit.png" data-id="design"> 
    </div> 
    <div class="project-image"> 
     <div class="overlay"> 
      <p>Roberts Landscaping</p> 
      <p>Design and Development</p> 
     </div> 
     <img src="images/landscapinglogo.png" data-id="landscaping"> 
    </div> 
    <div class="project-image"> 
     <div class="overlay"> 
      <p>Cuda</p> 
      <p>Development</p> 
     </div> 
     <img src="images/cudalogo.png" data-id="cuda"> 
    </div> 

    <div class="clicked-content"> 
     <div id="design" class="hideDivs"> 
      <h3>&Design</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam. Donec quam ipsum, imperdiet ultricies tristique at, gravida finibus erat. Integer laoreet volutpat sagittis. Donec pretium, lacus a ullamcorper dapibus, massa neque fermentum augue, eget convallis tortor orci nec nisl</p> 
     </div> 

스크립트 코드 그렇게 보이는

내 코드는 지금처럼 보인다 디스플레이 : 없음.

도와주세요.

편집 :

그래서 내가 방법을 모두 시도했습니다 지금까지 주석 그러나 그들은 나를 위해 작동하지 않는 것. 이미지 위에 오버레이가 있기 때문에 그럴 수 있습니까? 대신 실제 div 요소를 대상으로 시도했지만 콘텐츠를로드 할 수 없습니다.

Answer 1

여기 구현하고자하는 기본 샘플을 추가했습니다. 당신이 제공 한 코드의 주요 문제는 당신이 당신이 할 수 #design 및

$("img").on('click', function() { 
 
    console.log('hey ther'); 
 
    var hello = $(this).attr('data-id'); 
 
    $('.hideDivs').hide(); 
 
    $('#' + hello).show(); 
 
});

img { 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.project-image { 
 
    border: 1px solid red; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
.hideDivs { 
 
    display: none; 
 
} 
 
.hideDivs:first-child { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="projects"> 
 
    <h2>Newest Projects</h2> 
 
    <p>Here are some of my newest works.</p> 
 
    <div class="project-image"> 
 
    <div class="overlay"> 
 
     <p>Design</p> 
 
     <p>Development</p> 
 
    </div> 
 
    <img src="images/anddesignedit.png" data-id="design"> 
 
    </div> 
 
    <div class="project-image"> 
 
    <div class="overlay"> 
 
     <p>Roberts Landscaping</p> 
 
     <p>Design and Development</p> 
 
    </div> 
 
    <img src="images/landscapinglogo.png" data-id="landscaping"> 
 
    </div> 
 
    <div class="project-image"> 
 
    <div class="overlay"> 
 
     <p>Cuda</p> 
 
     <p>Development</p> 
 
    </div> 
 
    <img src="images/cudalogo.png" data-id="cuda"> 
 
    </div> 
 

 
    <div class="clicked-content"> 
 
    <div id="design" class="hideDivs"> 
 
     <h3>Design</h3> 
 
     <p>Design lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam.</p> 
 
    </div> 
 
    <div id="landscaping" class="hideDivs"> 
 
     <h3>Roberts Landscaping</h3> 
 
     <p>Roberts lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam.</p> 
 
    </div> 
 
    <div id="cuda" class="hideDivs"> 
 
     <h3>Cuda</h3> 
 
     <p>Cuda lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam.</p> 
 
    </div> 
 
    </div>