Question

我试图隐藏表单并在单击按钮时显示必要的表单。但是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();
});

Answer 1

这适用于您的HTML。

获取点击按钮的.container以确定要显示的$('.nav button').on('click', function (e) { var thisButtonEq = $(this).index(); $(".container").hide().eq(thisButtonEq).show(); })。

＆＃13;

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

＆＃13;

{"service": {"name": "wrapper", "tags": ["consul-wrapper"], "port":8000,"address":"127.0.0.1",}}

＆＃13;

Answer 2

只需为使用的按钮提供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();
 });

Answer 3

将您的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();
});

Answer 4

修改您的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()参数设置错误

Answer 5

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

刚刚检查过..工作正常...... <button>没有href。删除它。

由于

Answer 6

您的代码中存在许多错误。它应该是我相信的事情：

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

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

6 个答案: