hide() 버튼을 클릭 한 후 jquery 메서드가 작동하지 않습니다.

Question

하나의 버튼, 즉 Staffing과 두 번째 버튼이 있습니다. 다른 버튼은 NonStaffing입니다. Staffing 버튼을 클릭하면 원하는 결과를 얻을 수 있습니다. 즉, page1을보고 page2를 숨길 수 있음을 의미합니다. 그러나 NonStaffing 버튼을 클릭하면 원하는 결과가 나타나지 않습니다. 즉, page1을 숨기고 page2를 표시하는 것입니다. 전체 페이지를 숨 깁니다. 나는 문제를 알아낼 수 없다.

HTML :

<ul> 
    <li class="menu-item" style="list-style-type: none;margin-left: 50px; margin-top: -120px; position: absolute;"> 
     <input type="submit" name="projectType" value="Staffing" > 
    </li> 
    <li style="list-style-type: none;margin-left: 150px; margin-top: -120px; position: absolute;" > 
     <input type="submit" name="projectType1" value="NonStaffing"> 
    </li> 
</ul> 


<div id="abc1" style="background: #CCC; height:250px;width:250px;margin-top:150px;border: 4px solid #AAA;"> 
    <button>Open Dialog</button> 
     Page1 

</div> 


<div id ="mno" style="background: #CCC; height:110px;width:150px;margin-left:410px;margin-top: -250px; border: 4px solid #AAA;"> Page2 

</div> 

자바 스크립트 : 당신이 here 위의 코드의 JSFiddle을 찾을 수 있습니다

var dialogOffset = { 
    top: 50, 
    left: 10 
} 
    $("input:submit[name=projectType1]").click(function() { 
    var value = $(this).val(); 
    if(value=='NonStaffing'){ 

     $('#mno').show(); 
     $('#abc1').hide(); 


    }else{ 


    } 
}); 



    $("input:submit[name=projectType]").click(function() { 
       var value = $(this).val(); 
        if(value=='Staffing'){ 
         $('#abc1').show(); 
         $('#mno').hide(); 
        }else{} 
       }); 



$('button').click(function() { 
    var $parent = $(this).closest('div.col'); 
    var parentPos = $parent.offset() 
    var parentIndex = $('.col').index($parent); 
    var numDialogs= $('.colDialog_'+parentIndex).length; 
    var dialogTop=parentPos.top + dialogOffset.top + numDialogs*30; 
    var dialogPosition = [parentPos.left + dialogOffset.left, dialogTop]; 
    $('<div class="colDialog_'+parentIndex+'">').dialog({  
     position: dialogPosition, 
     width: 170, 
     title: 'Col:'+(parentIndex+1 +', Dia: '+(numDialogs+1)) , 
     close: function() { 
      $(this).remove() 
     } 
    }) 
});​ 

합니다.

Answer 1

<input type="submit" class="chgpage" rel="abc1" value="Staffing" > 
<input type="submit" class="chgpage" rel="mno" value="NonStaffing"> 
<div id="abc1" class="page" style="display:none;width:500px;height:500px;border:1px solid black;">Page1</div> 
<div id ="mno" class="page" style="display:none;width:500px;height:500px;border:1px solid red;">Page2</div> 


<script type="text/javascript"> 
    $("input.chgpage").click(function() { 
     $('div.page').hide(); 
     $('#'+$(this).attr('rel')).show(); 
    }); 
</script> 

되세요 재미 동일 할 수)

Answer 2

다음은 간단한 코드입니다. 완벽하지는 않지만 코드의 철학을 지키려고 노력했습니다. 마이너스 마진의 악용과 절대 위치 지정으로 인한 문제를 수정합니다. 자바 스크립트는

<ul style="list-style-type: none; margin-top: 50px;"> 
    <li class="menu-item" style="margin-left: 50px; display: inline-block;"> 
     <input type="submit" name="projectType" value="Staffing" > 
    </li> 
    <li style="margin-left: 50px; display: inline-block;" > 
     <input type="submit" name="projectType1" value="NonStaffing"> 
    </li> 
</ul> 

<div style="margin-top:150px; position: relative;"> 
    <div id="abc1" style="position: absolute; background: #CCC; height:250px; width:250px; border: 4px solid #AAA;"> 
     <button>Open Dialog</button> 
      Page1   
    </div> 


    <div id ="mno" style="position: absolute; left: 350px; background: #CCC; height:110px; width:150px; border: 4px solid #AAA;"> Page2 

    </div> 
</div> 

...