如何隐藏单击按钮上的表单

我想隐藏表单并单击按钮显示必要的表单。但JavaScript代码不起作用。 jfiddle链接：https://jsfiddle.net/5d28uLkL/
请纠正错误，如果任何如何隐藏单击按钮上的表单

HTML：

<div class="nav"> 
<button href="#" data-category-type="high">CRSS</button> 

<button href="#" data-category-type="low">TUBU</button> 


<div id="Categories"> 

<div class="container" data-category-type="high"> 


      <div class="fs-form-wrap" id="fs-form-wrap"> 
       <div class="fs-title"> 
        <h1>CR Strips</h1> 
       </div> 
       <form id="myform" class="fs-form fs-form-full" autocomplete="off"> 
        <ol class="fs-fields"> 
         <li> 
          <label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label> 
          <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/> 
         </li> 
         <li> 
          <label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label> 
          <input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/> 
         </li> 
         <li> 
          <label class="fs-field-label fs-anim-upper" for="q3">Phone</label> 
          <input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/> 
         </li> 




        </ol><!-- /fs-fields --> 
        <button class="fs-submit" type="submit">Send answers</button> 
       </form><!-- /fs-form --> 
      </div><!-- /fs-form-wrap --> 
     </div> 








<div class="container" data-category-type="low"> 


      <div class="fs-form-wrap" id="fs-form-wrap1"> 
       <div class="fs-title"> 
        <h1>TUBE</h1> 
       </div> 
       <form id="myform" class="fs-form fs-form-full" autocomplete="off"> 
        <ol class="fs-fields"> 
         <li> 
          <label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label> 
          <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/> 
         </li> 
         <li> 
          <label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label> 
          <input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/> 
         </li> 
         <li> 
          <label class="fs-field-label fs-anim-upper" for="q3">Phone</label> 
          <input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/> 
         </li> 



        </ol><!-- /fs-fields --> 
        <button class="fs-submit" type="submit">Send answers</button> 
       </form><!-- /fs-form --> 
      </div><!-- /fs-form-wrap --> 
</div> 

     </div> 
    </div>

JAVASCRIPT：

$('.nav a').on('click', function (e) { 
    e.preventDefault(); 
    var cat = $(this).data('categoryType'); 
    var nam = $(this).data('categoryName'); 
    $('#Categories > div').hide(); 
    $('#Categories > div[data-category-type="'+cat+'"]').show(); 
    $('#Categories > div[data-category-name="'+nam+'"]').show(); 
});

来源

2017-06-22 Sri Hari

只给id使用的按钮，并将它们链接到js。

HTML：

<button id="high" href="#" data-category-type="high">CRSS</button> 
<button id="low" href="#" data-category-type="low">TUBULAR COMPONENTS</button>

JS：

$('#high').on('click',function(){ 
    $('#fs-form-wrap').show(); 
    $('#fs-form-wrap1').hide(); 
}); 
    $('#low').on('click',function(){ 
    $('#fs-form-wrap1').show(); 
    $('#fs-form-wrap').hide(); 
});

来源

2017-06-22 13:43:01 Ashwin

编辑你的JavaScript了这一点。

$('.nav button').on('click', function (e) { 
    e.preventDefault(); 
    var cat = $(this).data('categoryType'); 
    var nam = $(this).data('categoryName'); 
    $('#Categories > div').hide(); 
    $('#Categories > div[data-category-type="'+cat+'"]').show(); 
    $('#Categories > div[data-category-name="'+nam+'"]').show(); 
});

来源

2017-06-22 13:29:39

编辑您的JavaScript

$('.nav button').on('click', function (e) { 
    e.preventDefault(); 
    var cat = $(this).data('category-type'); 
    var nam = $(this).data('category-type'); 
    $('#Categories > div').hide(); 
    $('#Categories > div[data-category-type="'+cat+'"]').show(); 
    $('#Categories > div[data-category-name="'+nam+'"]').show(); 
});

你的工作环节https://jsfiddle.net/5d28uLkL/2/

你把.data()参数错误

来源

2017-06-22 13:33:14 vijay

有在你的代码中的许多错误。它应和这样的事情我相信的：

HTML：

<div class="nav"> 
    <button href="#" class="switch" data-category-type="high">CRSS</button> 
    <button href="#" class="switch" data-category-type="low">TUBU</button> 
    <div id="Categories"> 
    <div class="container high"> 
     <div class="fs-form-wrap" id="fs-form-wrap"> 
     <div class="fs-title"> 
      <h1>CR Strips</h1> 
     </div> 
     <form id="myform" class="fs-form fs-form-full" autocomplete="off"> 
      <ol class="fs-fields"> 
      <li> 
       <label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label> 
       <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/> 
      </li> 
      <li> 
       <label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label> 
       <input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/> 
      </li> 
      <li> 
       <label class="fs-field-label fs-anim-upper" for="q3">Phone</label> 
       <input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/> 
      </li> 
      </ol> 
      <!-- /fs-fields --> 
      <button class="fs-submit" type="submit">Send answers</button> 
     </form> 
     <!-- /fs-form --> 
     </div> 
     <!-- /fs-form-wrap --> 
    </div> 
    <div class="container low"> 
     <div class="fs-form-wrap" id="fs-form-wrap1"> 
     <div class="fs-title"> 
      <h1>TUBE</h1> 
     </div> 
     <form id="myform" class="fs-form fs-form-full" autocomplete="off"> 
      <ol class="fs-fields"> 
      <li> 
       <label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label> 
       <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/> 
      </li> 
      <li> 
       <label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label> 
       <input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/> 
      </li> 
      <li> 
       <label class="fs-field-label fs-anim-upper" for="q3">Phone</label> 
       <input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/> 
      </li> 
      </ol> 
      <!-- /fs-fields --> 
      <button class="fs-submit" type="submit">Send answers</button> 
     </form> 
     <!-- /fs-form --> 
     </div> 
     <!-- /fs-form-wrap --> 
    </div> 
    </div> 
</div>

JS：

//here you've got wrong selector 
$('.nav button.switch').on('click', function(e) { 
    e.preventDefault(); 
    var cat = $(this).data('category-type'); //here you get class of your container from data attribute on button. 
    $('#Categories > div').hide(); //hide all 
    $('#Categories > div.' + cat).show(); //show selected 
});

我做出一些改变你的HTML和JS代码，并在js代码的一些意见。我爱它可以帮助你。 JsFiddle here。

来源

2017-06-22 13:34:11

下面是适用于您的HTML的东西。

它获取单击按钮的index来决定显示哪个.container。

$('.nav button').on('click', function (e) { 
 
    var thisButtonEq = $(this).index(); 
 
    $(".container").hide().eq(thisButtonEq).show(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="nav"> 
 
    <button href="#" data-category-type="high">CRSS</button> 
 
    <button href="#" data-category-type="low">TUBU</button> 
 

 
    <div id="Categories"> 
 

 
    <div class="container" data-category-type="high"> 
 
     <div class="fs-form-wrap" id="fs-form-wrap"> 
 
     <div class="fs-title"> 
 
      <h1>CR Strips</h1> 
 
     </div> 
 
     <form id="myform" class="fs-form fs-form-full" autocomplete="off"> 
 
      <ol class="fs-fields"> 
 
      <li> 
 
       <label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label> 
 
       <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/> 
 
      </li> 
 
      <li> 
 
       <label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label> 
 
       <input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/> 
 
      </li> 
 
      <li> 
 
       <label class="fs-field-label fs-anim-upper" for="q3">Phone</label> 
 
       <input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/> 
 
      </li> 
 
      </ol><!-- /fs-fields --> 
 
      <button class="fs-submit" type="submit">Send answers</button> 
 
     </form><!-- /fs-form --> 
 
     </div><!-- /fs-form-wrap --> 
 
    </div> 
 

 

 
    <div class="container" data-category-type="low"> 
 
     <div class="fs-form-wrap" id="fs-form-wrap1"> 
 
     <div class="fs-title"> 
 
      <h1>TUBE</h1> 
 
     </div> 
 
     <form id="myform" class="fs-form fs-form-full" autocomplete="off"> 
 
      <ol class="fs-fields"> 
 
      <li> 
 
       <label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label> 
 
       <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/> 
 
      </li> 
 
      <li> 
 
       <label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label> 
 
       <input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/> 
 
      </li> 
 
      <li> 
 
       <label class="fs-field-label fs-anim-upper" for="q3">Phone</label> 
 
       <input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/> 
 
      </li> 
 
      </ol><!-- /fs-fields --> 
 
      <button class="fs-submit" type="submit">Send answers</button> 
 
     </form><!-- /fs-form --> 
 
     </div><!-- /fs-form-wrap --> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-22 13:36:28

嘿，你选择了错误的选择.. 使用这种$('.nav button')代替$('.nav a')。

Just checked..work fine..and <button> doesnot have href .remove that。

谢谢

来源

2017-06-22 13:37:36 Jana

如何隐藏单击按钮上的表单

回答

相关问题