Question

我在同一页面上有多个输入。根据选择，一旦用户按“提交”，我想显示相关的div并隐藏与选择无关的那些。

我可以实现我想要的结构但不能让jQuery显示不同的值。

到目前为止，这是我的代码：

(function($) {
  $('#quiz_submit').click(function() {
    $('#quiz_submit').click(function() {
      if ($('input[type="radio"]').attr("id") == "option-one") {
        $('.a1').show();
        $('.a2, .a3').hide();
      } else if ($('input[type="radio"]').attr("id") == "option-two") {
        $('.a2').show();
        $('.a1, .a3').hide();
      } else($('input[type="radio"]').attr("id") == "option-three") {
        $('.a3').show();
        $('.a1, .a2').hide();
      }
    });
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="quiz__form">
  <li class="quiz__item">
    <input type="radio" id="option-one" name="quiz-selector">
    <label for="option-one">Question 1</label>
    <div class="check"></div>
  </li>
  <li class="quiz__item">
    <input type="radio" id="option-two" name="quiz-selector">
    <label for="option-two">Question 2</label>

    <div class="check">
      <div class="inside"></div>
    </div>
  </li>
  <li class="quiz__item">
    <input type="radio" id="option-three" name="quiz-selector">
    <label for="option-three">Question 3</label>

    <div class="check">
      <div class="inside"></div>
    </div>
  </li>
</ul>

<input type="button" id="quiz_submit" class="submit-cta" value="SUBMIT">

<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>

Answer 1

您需要在HTML中添加button id=quiz_submit。在第三个也是最后一个条件下你也有拼写错误。

(function($) {
  $('#quiz_submit').click(function() {
    let checkedId = $('input[type=radio][name=quiz-selector]:checked').attr('id')
    if (checkedId == "option-one") {
      $('.a1').show();
      $('.a2, .a3').hide();
    } else if (checkedId == "option-two") {
      $('.a2').show();
      $('.a1, .a3').hide();
    } else if(checkedId == "option-three") {
      $('.a3').show();
      $('.a1, .a2').hide();
    }
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="quiz__form">
  <li class="quiz__item">
    <input type="radio" id="option-one" name="quiz-selector">
    <label for="option-one">Question 1</label>
    <div class="check"></div>
  </li>
  <li class="quiz__item">
    <input type="radio" id="option-two" name="quiz-selector">
    <label for="option-two">Question 2</label>

    <div class="check">
      <div class="inside"></div>
    </div>
  </li>
  <li class="quiz__item">
    <input type="radio" id="option-three" name="quiz-selector">
    <label for="option-three">Question 3</label>

    <div class="check">
      <div class="inside"></div>
    </div>
  </li>
</ul>
<input type="button" id="quiz_submit" value="submit"/>
<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>

Answer 2

如果您的问题是您的jQuery不起作用，则可能与您的代码没有任何运行方式有关。

首先，你在点击功能中有一个点击功能，带走其中一个。其次，该单击处理程序甚至没有按钮可以运行。我无法看到代码中的任何特别错误，因为那些是我所关注的事情。

如果您在修复错误后仍然收到错误，请告诉我。

Answer 3

你的html代码中没有id quiz_submit的元素。

Answer 4

我刚刚为你创建了一个代码。这可能是你的答案。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="quiz__form">
  <li class="quiz__item">
    <input type="radio" id="option-one" name="quiz-selector">
    <label for="option-one">Question 1</label>
    <div class="check"></div>
  </li>
  <li class="quiz__item">
    <input type="radio" id="option-two" name="quiz-selector">
    <label for="option-two">Question 2</label>

    <div class="check">
      <div class="inside"></div>
    </div>
  </li>
  <li class="quiz__item">
    <input type="radio" id="option-three" name="quiz-selector">
    <label for="option-three">Question 3</label>

    <div class="check">
      <div class="inside"></div>
    </div>
  </li>
</ul>

<div class="a1" style="display:none">Answerof the questoon - One </div>
<div class="a2" style="display:none">Answerof the questoon - Two </div>
<div class="a3" style="display:none">Answerof the questoon - Three </div>

和jquery

$(document).ready(function(){

  $('input[type="radio"]').change(function(){
  if($(this).attr("id")=="option-one"){
    $(".a1").show();
    $(".a2").hide();
    $(".a3").hide();
  }
  if($(this).attr("id")=="option-two"){
    $(".a1").hide();
    $(".a2").show();
    $(".a3").hide();
  }
  if($(this).attr("id")=="option-three"){
    $(".a1").hide();
    $(".a2").hide();
    $(".a3").show();
  }
  });

});

这里有小提琴。

ClickHereForFiddle

在提交显示div基于单选按钮选择

4 个答案: