Question

尝试在jquery中隐藏/显示，我可以让第一个工作，但当我尝试第二个时，我进入函数，可以看到值过去，但它什么也没做（实际上隐藏了第一个div）

首先是我的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-->

Answer 1

问题出在您的HTML中。

你有一个id为“Block-1”的父div和一个“toHide”类。

在第一个函数中，您将显示“Block-1”元素，该元素将作为父元素使用。

然而，对于显示子div“foam-1”或“foam-no”的第二个函数，您首先隐藏所有带有“toHide”类的元素，同时隐藏父级。

然后你要切换“foam-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”等。或者你可以引用父元素，只在需要时隐藏。

希望这是有道理的，否则请告诉我。

两个jquery切换到目前为止

1 个答案: