兩個jQuery的切換到目前爲止它

在jQuery中試着隱藏/顯示，我可以得到第一個工作，但當我嘗試第二個我進入功能，可以看到過去的價值，但它什麼也沒做（實際上隱藏了第一個div）兩個jQuery的切換到目前爲止它

下面是第一個我的jquery。跟着我的HTML。正如你所看到的，我有兩個警報，並且我進入了他們兩個，但第二個。什麼都沒發生。

//  SHOW/HIDE CONTENT 
     $(function() { 
//   SHOW HIDE FURNITURE TYPE SECTIONS 
      $("[name=radioShow]").click(function(){ 
       alert('First to here!'); 


        $('.toHide').hide(); 
        $("#block-"+$(this).val()).show('slow'); 
       }); 

//   SHOW HIDE FOAM REPLACEMENT SECTION 
      $("[name=radioShowFoam]").click(function(){ 
       alert('Second should show sommat!'); 
       alert($(this).val()); 

        $('.toHide').hide(); 
        $(".foam-"+$(this).val()).show('slow'); 
       }); 
     });

現在下面是我的html。

<!--TYPE OF CHAIR--> 
<div id="radio"> 
    <input type="radio" id="radio1" name="radioShow" value="1"><label for="radio1">Dining Chair</label> 
    <input type="radio" id="radio2" name="radioShow" value="2"><label for="radio2">Stool</label> 
    <input type="radio" id="radio3" name="radioShow" value="3"><label for="radio3">Ottoman</label> 
    <input type="radio" id="radio4" name="radioShow" value="4"><label for="radio4">Louis XV style</label> 
</div> 

<!--DINING CHAIR SECTION--> 
<div id="block-1" class="toHide" style="display:none; width:100%;"> 
    <!--BASIC CHARGE FOR A DINING CHAIR IS FIRSTLY ADDED TO THE TEXT BOX BELOW--> 
    Price:<input id='text' value='10' /> 

    <!--BELOW CODE WILL CALL THE FUNCTION TO TAKE THE VALUE OF WHATEVER HAS JUST BEEN CLICKED--> 
    <!--onchange='go(this.options[this.selectedIndex].value);--> 

    <h2>Dining Chair</h2> 


    <div class="radio"> 
     <label class="orderLabel">Is the base Removable?</label> 
     <input type="radio" id="radio5" name="radio" value="y"><label for="radio5">Yes</label> 
     <input type="radio" id="radio6" name="radio" value="n"><label for="radio6">No</label> 
    </div> 


    <div class="radio"> 
     <label>Number of removable bases/squabs per chair?</label> 
     <input type="radio" id="radio7" name="radio1" value="1"><label for="radio7">1</label> 
     <input type="radio" id="radio8" name="radio1" value="2"><label for="radio8">2</label> 
    </div> 

    <div class="radio"> 
    <label for="spinner">Number of chairs:</label> 
    <input id="spinner" name="value"><button id="setvalue">Set value to 0</button><br /> 
    </div> 

    <div class="radio"> 
     <label>Foam replacement required?</label> 
     <input type="radio" id="radio09" name="radioShowFoam" value="1"><label for="radio09">Yes</label> 
     <input type="radio" id="radio10" name="radioShowFoam" value="0"><label for="radio10">No</label> 
    </div> 

      <!--IF YES--> 
      <div class="foam-1 toHide" style="display:none; width:100%;"> 
       NEED FOAM 
      </div> 
      <!--END OF IF YES--> 

      <!--IF NO--> 
      <div id="foam-no" class="toHide" style="display:none; width:100%;"> 
       DONT NEED FOAM 
      </div> 
      <!--END OF IF NO-->

來源

2014-01-21 WayneP

問題出在您的HTML中。

你有一個id爲「Block-1」和一個「toHide」類的父div。

在您的第一個功能中，您將顯示「Block-1」元素，它將作爲父元素工作。

然而，對於顯示子div「foam-1」或「foam-no」的第二個函數，首先隱藏所有具有「toHide」類的元素，同時隱藏父元素。

然後你切換「泡沫-1」元素來顯示，但父母是不可見的。

快速和簡單的解決方法是重命名的父元素的類說「blockToHide」

您的JavaScript就變成了：

//  SHOW/HIDE CONTENT 
     $(function() { 
//   SHOW HIDE FURNITURE TYPE SECTIONS 
      $("[name=radioShow]").click(function(){ 
       alert('First to here!'); 


        $('.blockToHide').hide(); 
        $("#block-"+$(this).val()).show('slow'); 
       }); 

//   SHOW HIDE FOAM REPLACEMENT SECTION 
      $("[name=radioShowFoam]").click(function(){ 
       alert('Second should show sommat!'); 
       alert($(this).val()); 

        $('.toHide').hide(); 
        $(".foam-"+$(this).val()).show('slow'); 
       }); 
     });

從你的HTML據我瞭解，你將有幾個這些塊會消失並出現，因此我會爲子元素「toHide」提出一個更好的命名策略，比如「toHide-1」，「toHide2」等等。或者，您可以引用父元素並僅根據需要隱藏。

希望這是有道理的，否則讓我知道。

來源

2014-01-21 23:27:57 JanR

兩個jQuery的切換到目前爲止它

回答

相關問題