-3

私は2つのボタンを持っています。1つのボタンはつまりStaffing、もう1つのボタンは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>

Javascript：

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()
        }
    })
});​

そして、ここで上記のコードのJSFiddleを見つけることができます。

4

2 に答える 2

1

これが単純化されたコードです：それは完璧ではありませんが、私はあなたのコードの哲学を維持しようとしました。ネガティブマージンと絶対ポジショニングの不適切な使用によって引き起こされた問題を修正します。javascriptは同じにすることができます...

<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>

</ p>

于 2012-11-16T11:01:02.907 に答える
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>

楽しんで ;）

于 2012-11-16T11:01:07.993 に答える