사진을 클릭하고 목록에 해당 항목을 표시하십시오.

나는 내 대학의 수학 부서를위한 새 사이트를 쓰고 있습니다. 교수님에 관한 정보가 담긴 페이지를 작성할 때 문제가 발생했습니다. 나는 사진이 담긴 테이블을 디자인했으며, 사용자가 사진을 클릭 할 때 특정 전문가에 대한 세부 정보가 담긴 상자를 사용자에게 보여 주었다. 여기에 정보-DIV HTML로 같은 모습입니다 다음 PROFS에 대한 모든 정보를-상자사진을 클릭하고 목록에 해당 항목을 표시하십시오.

사업부 다음

<div id = "kartenliste"> 

<div class="w3-card-4 visitenkarte hidden" id="visprof1"> 
    *info about the first professor* 
</div> 

</div>

내가 jQuery를에 뭘하려 :

$("#proftable td").click(function() { 
    var itemIndex = $("#profdiv").index(this) + 1;  
    $("#kartenliste .visitenkarte:nth-child(itemIndex)").show(); 
});

그래서 나는 테이블 안에있는 사진의 색인을 얻고 그것에 1을 더하여 모든 교수들과 함께 목록의 해당 정보 상자의 색인과 일치 시키려고 노력하고 있습니다. 분명히 변수 childIndex는 n 번째 자식 메서드에서 인수로 인식되지 않습니다.

또 다른 아이디어

가 사용했던 대한 루프 :

우리 부서에서 (22 명) 교수, 난에 따라서 종료 값이 있습니다

$("#proftable td").click(function() { 
    for (var i = 0; i < 22; i++) { 
     if (i == $(this).index()) { 
      $("#kartenliste .visitenkarte:nth-child(i + 1)").show(); 
     }; 
    }; 
});

. 그러나 이것도 작동하지 않았다 ...

더 좋은 아이디어가 있습니까? 나는 정말로 감사 할 것입니다.

미리 감사드립니다.

출처

2016-06-02 Teodor Chiaburu

$ ("# kartenliste .visitenkarte : nth-child ("+ itemIndex + ")"). show(); //? – mrunion

변수가 따옴표 사이에 인식되지 않을지 궁금 해서요 ... 시도했지만 결과가 없습니다. 어쨌든 답장을 보내 주셔서 감사합니다. –

그것은 나입니다. 다시 말하지만 실제로는 맞았습니다. 인덱스 값을 따옴표 바깥에 추가해야합니다. index()에 대한 설명서를 더 자세히 읽고 마지막으로 어떻게 작동하는지 이해했습니다. 여기에 (지금 기능적인) 코드가 있습니다 :'var itemIndex = $ ("td").) .show(); ' –

당신은 $("#kartenliste .visitenkarte").eq(itemIndex).show()

출처

2016-06-02 19:59:27 poashoas

감사합니다. 아이디어도 효과가 있습니다. 나는 단지 n 번째 아이가 1에서 시작하고 0에서 eq을 유지한다는 것을 명심해야한다. –

@TeodorChiaburu 나는 귀중한 평판 포인트를 얻기 위해 upvote를 낚는다 :-D – poashoas

아직 투표 할 수 없다. 방금 구독했다. 사이트. 투표로 피드백을 줄 수있는 몇 가지 사항이 필요합니다. –

내가 가장 좋은 방법은이 같은 ID로

<td own-attr="visprof1">Prof John</td> 

<div id = "kartenliste"> 

<div class="w3-card-4 visitenkarte hidden" id="visprof1"> 
    *info about the first professor* 
</div> 

</div>

를 div에 그리고 JQ

에서

$('td').click(function(){ 
    var showById=$(this).attr('own-attr'); 
    $('.visitenkarte#'+showById).show(); 
});

보여 다음 TD에 attr에 자책골을 추가 할 것이라고 생각 사용할 수 있습니다

출처

2016-06-02 20:15:15 bakowroc

감사합니다! 영리한 생각, 네가 한 짓을 내가 안다. 코드도 작동합니다. 이제 선택할 수있는 세 가지 옵션이 있습니다. :) –

사진을 클릭하고 목록에 해당 항목을 표시하십시오.

답변

관련 문제