학부모 학급을 취득하십시오

두 장의 카드를 뒤집으려고합니다. 각 상자에 중복 된 자바 스크립트를 생성하고 싶지 않아 상자를 쉽게 추가 할 수 있으며 상자 번호에 클래스 나 ID를 변경할 수 있습니다.학부모 학급을 취득하십시오

여기 내 코드입니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="base.css"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="jquery.flip.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script> 
<title></title> 
<script> 
    $(document).ready(function(){ 
     $(".flip").click(function() { 
      var className = $('.box').attr('id'); 
      $('#'+className).flip({ 
       direction:'lr', 
       color: 'white', 
      }); 

      $('#'+className+' .content').hide(); 
      $('#'+className+' .flipped_content').show(); 
     }); 

     $(".revert").click(function() { 
      var className = $('.box').attr('id'); 
      $('#'+className).flip({ 
       direction:'lr', 
       color: '#82f5f5', 
      }); 
      $('#'+className+' .flipped_content').hide(); 
      $('#'+className+' .content').show(); 

     }); 

    }); 
</script> 
</head> 

<body> 
<div id="nav"> 


    <div id="clear"></div> 
</div><!-- END NAV --> 

<div id="container"> 

    <div id="1" class="box"> 
     <div id="content" class="content"> 
      <div id="flip" class="flip"> 
       <img src="flip.png" width="25px"/> 
      </div> 
      <br/><br/> 
      <h1 align="center">Subject 1</h1><br/> 
      <p>This is a description of subject 1</p> 
     </div> 

     <div id="content" class="flipped_content b"> 
      <div id="flip" class="revert"> 
       <img src="flip.jpg" width="25px"/> 
      </div> 
      <br/><br/> 
      <h1 align="center">Subject 1 B</h1><br/> 
      <p>This is a description of subject 1 B</p> 
     </div> 
    </div><!-- END BOX --> 

    <div id="2" class="box"> 
     <div id="content" class="content"> 
      <div id="flip" class="flip"> 
       <img src="flip.png" width="25px"/> 
      </div> 
      <br/><br/> 
      <h1 align="center">Subject 2</h1><br/> 
      <p>This is a description of subject 2</p> 
     </div> 

     <div id="content" class="flipped_content b"> 
      <div id="flip" class="revert"> 
       <img src="flip.jpg" width="25px"/> 
      </div> 
      <br/><br/> 
      <h1 align="center">Subject 2 B</h1><br/> 
      <p>This is a description of subject 2 B</p> 
     </div> 
    </div><!-- END BOX --> 



    <div id="clear"></div> 

    <div id="footer"> 
     <hr> 

     <p style="float:right;">Tiny Learners - Copyright 2012</p> 

     <p align="left">About</p> 

     <p align="left">Contact</p> 
    </div> 
</div><!-- END CONTAINER --> 
</body> 
</html>

내가 관련 DIV 상자의 상자를 숨기 알고 싶어 플립을 클릭합니다. I 클래스 (2)의 내부에 "플립"을 클릭하면

그래서 나는 IDS, 당신은 문제를 지나친있는 고유해야 무사의 의견뿐만 아니라 클래스 2

출처

2012-07-24 Chris Olson

'id's 고유 – Musa

해야 내가하지 않습니다 반복 JQuery와하지 않습니다. 모든 상자에서 동일한 자바 스크립트를 사용하고 싶습니다. –

@Chris : 네, 그렇기 때문에 ID를 사용할 수 없습니다. 동일한 ID를 가진 요소가 여러 개 있어도 jQuery는 항상 ** 하나만 ** 선택합니다 (가장 첫 번째 가능성이 높습니다). Btw, 귀하의 질문 제목 정말로 문제를 설명하지 않습니다 ... –

과 관련된 사업부를 숨길. 부모 클래스가 필요하지 않습니다. 부모 클래스와 직접 상호 작용할 수 있습니다.

클래스에 flip ID를 변경 한 후 :

$(".flip").click(function() { 
    $(this).parent().hide(); 
});

출처

2012-07-24 00:20:38 bhamlin

클래스 번호를 변수에 넣고 싶습니다. 이 작업을 수행하는 방법을 알고 있습니까? –

위의 동의 : http://jsfiddle.net/TNwYE/

출처

2012-07-24 00:26:47 sanusart

학부모 학급을 취득하십시오

답변

관련 문제