jQuery show and hide PHP로 생성 된 내용

Question

나는 총 jQuery 멍청하다. 하지만 PHP와 함께 스크립트에 사용해야합니다. 이 아이디어는 사람들이 백엔드에 새로운 변호사를 추가 할 수 있고 버튼과 내용이 페이지에 추가된다는 것입니다. 사이트에서 다음 예제와 같이 버튼을 사용하여 변호사를 살펴볼 수 있습니다. 여기

http://strak-design.com/varlaw/team

해당 사이트 내가 그것을 어떻게 처리할지. 현재 고객을위한 연기와 거울 일뿐입니다. 변호사를 동적으로 추가하고 제거하면 분명히 깨집니다.

내 HTML/PHP는 다음과 같습니다. 어떤 아이디어? 심지어 어디서부터 시작해야 할지도 모르겠다 ...

<?php foreach ($team as $lawyer) { ?> 
<div id="<?php echo $lawyer->id?>_button" class="lawyer_title_small title-<?php echo $lawyer->title_colour;?>"> 
    <h2><?php echo $lawyer->name?></h2> 
</div> 
<?php }?> 

<?php foreach ($team as $lawyer) { ?> 
<div id="<?php echo $lawyer->id;?>" class="team_info"> 
    <div class="team_info_left"> 
     <img src="img/team/<?php echo $lawyer->picture;?>"/> 
     <table> 
      <tr> 
       <th style="color: #9e0039;">TEL:</th> 
       <th><?php echo $lawyer->tel;?></th> 
      </tr> 
      <tr> 
       <th style="color: #9e0039;">GSM:</th> 
       <th><?php echo $lawyer->gsm;?></th> 
      </tr> 
      <tr> 
       <th style="color: #9e0039;">MAIL:</th> 
       <th style="font-size:15px;"><?php echo $lawyer->mail;?></th> 
      </tr> 
     </table> 
    </div> 
    <div class="team_info_right"> 
     <h4>OVER <?php echo $lawyer->name;?></h4> 
     <?php echo $lawyer->about;?> 
     <h4>VOORKEURKENNIS:</h4> 
     <?php echo $lawyer->knowledge;?> 
    </div> 

</div> 
<?php }?> 

분명하지 않다면, 나는 더 설명하려고 노력할 것이다. 고마워요!

Answer 1

관련 코드가 /varlaw/js/main.js 인 자바 스크립트이지만 PHP를 본 것이 유용합니다.

먼저, PHP에서는, 포함 DIV 내부의 변호사 버튼을 구축 다음과 같이 다음과 같이

<div><!-- unstyled structural div --> 
    <?php foreach ($team as $lawyer) { ?> 
    <div id="<?php echo $lawyer->id?>_button" class="lawyer_title_small title-<?php echo $lawyer->title_colour;?>"> 
     <h2><?php echo $lawyer->name?></h2> 
    </div> 
    <?php }?> 
</div> 

둘째, PHP에 포함 DIV 내부의 "team_info"div의 구축 :

<div><!-- unstyled structural div --> 
    <?php foreach ($team as $lawyer) { ?> 
    <div id="<?php echo $lawyer->id;?>" class="team_info"> 
     <div class="team_info_left"> 
      <img src="img/team/<?php echo $lawyer->picture;?>"/> 
      <table> 
       <tr> 
        <th style="color: #9e0039;">TEL:</th> 
        <th><?php echo $lawyer->tel;?></th> 
       </tr> 
       <tr> 
        <th style="color: #9e0039;">GSM:</th> 
        <th><?php echo $lawyer->gsm;?></th> 
       </tr> 
       <tr> 
        <th style="color: #9e0039;">MAIL:</th> 
        <th style="font-size:15px;"><?php echo $lawyer->mail;?></th> 
       </tr> 
      </table> 
     </div> 
     <div class="team_info_right"> 
      <h4>OVER <?php echo $lawyer->name;?></h4> 
      <?php echo $lawyer->about;?> 
      <h4>VOORKEURKENNIS:</h4> 
      <?php echo $lawyer->knowledge;?> 
     </div> 

    </div> 
    <?php }?> 
</div> 

이제 두 개의 이 일치 구조 div가 있습니다. 이 div의 해당 자식 요소는 부모 div 내에 같은 색인 이 있습니다. 이것은 매우 간단하고 효율적인 javaScript를 허용하므로 중요합니다.

셋째, 자바 스크립트와 모든 $("#marc_button")..., $("#dirk_button")... 등 코드를 대체 : 트랩이 실제로 필요가있는 경우

$(".lawyer_title_small").on("click", function() { 
    var $this = $(this); 
    if ($this.hasClass("lawyer_title_main")) { //this trap may be unnecessary 
     return; 
    } else { 
     //hide all lawyer divs, then selectively show the appropriate lawyer div 
     //ie. the div with the same index as the button that was clicked 
     $(".team_info").hide().eq($this.index()).show(); 
    } 
}); 

, 다음 클릭 처리기가 단순화 : 이제

$(".lawyer_title_small").on("click", function() { 
    $(".team_info").hide().eq($(this).index()).show(); 
}); 

, 당신의 PHP는 좋아하거나 자바 스크립트가 처리 할 수있는 변호사를 거의 또는 거의 갖지 않는 페이지를 만들 수 있습니다.