Question

我有一个基于单选按钮选择输出结果的表单。表单有多个单选按钮，根据选择将显示相关的div并隐藏不相关的单词。

在功能方面，它完美无缺。问题是，为了输出结果（一旦你选择了单选按钮）你必须按2X提交按钮。

这是我的代码：

(function($) {
  $('#quiz_submit').click(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);

.re-quiz__internal {
  max-width: 1000px;
  margin: 0 auto;
}

.quiz__section {
  float: left;
  width: calc(50% - 10px);
  margin-top: -60px;
  margin-right: 20px;
  background-color: #c1c1c1;
  padding: 40px 40px;
  box-shadow: 10px 20px 36px 0 rgba(0, 0, 0, 0.2), 0 10px 40px 0 rgba(0, 0, 0, 0.19) !important;
}

.slider__section {
  float: left;
  width: calc(50% - 10px);
}

.type__quiz {
  width: 50px;
  margin: 0 auto;
  padding: 0px 0px 10px 0px;
  border-bottom: 1px solid white;
  text-align: center;
  color: #FFF;
}

.quiz__title {
  color: #FFF;
  font-size: 2em;
  text-align: center;
  width: 400px;
  margin: 20px auto 40px auto;
}

.quiz__form {
  color: #FFF;
  margin-bottom: 20px;
  float: left;
  width: 100%;
}

.quiz__item {
  color: #FFF;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 25px;
}

.quiz__item input[type=radio] {
  position: absolute;
  visibility: hidden;
}

.quiz__item label {
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 0px 25px 50px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

.quiz__item:hover label {
  color: #FFFFFF;
}

.quiz__item .check {
  display: block;
  position: absolute;
  border: 5px solid #FFF;
  border-radius: 100%;
  height: 32px;
  width: 32px;
  top: 30px;
  left: 0px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}

.quiz__item:hover .check {
  border: 4px solid #FFFFFF;
}

.quiz__item .check::before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
  left: 5px;
  margin: auto;
  transition: background 0.25s linear;
  -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked~.check {
  border: 4px solid #fff000;
}

input[type=radio]:checked~.check::before {
  background: #fff000;
}

input[type=radio]:checked~label {
  color: #EE78A5;
}

#quiz_submit {
  display: block;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  background: #fff000;
  color: #FFF;
  width: 160px;
  line-height: 40px;
  margin: 20px auto;
}

.a1,
.a2,
.a3 {
  display: none;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="re-quiz__internal">
  <div class="quiz__section">
    <p class="quiz__title">Questions for the quiz</p>
    <ul class="quiz__form">
      <li class="quiz__item">
        <input type="radio" id="option-one" name="quiz-selector">
        <label for="option-one">Qeustion number 1</label>
        <div class="check"></div>
      </li>
      <li class="quiz__item">
        <input type="radio" id="option-two" name="quiz-selector">
        <label for="option-two">Qeustion number 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">Qeustion number 3</label>

        <div class="check">
          <div class="inside"></div>
        </div>
      </li>


    </ul>
    <input type="button" id="quiz_submit" class="submit-cta" value="SUBMIT">

    <!-- Answers -->
    <div class="a1">Answerof the questoon - One </div>
    <div class="a2">Answerof the questoon - Two </div>
    <div class="a3">Answerof the questoon - Three </div>

  </div>
</div>

Answer 1

您正在另一个内部使用事件侦听器，因此第一个在第一次单击时附加第二个事件侦听器，之后您只使用第二个事件侦听器。试试这个：

(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);

双击需要输出单选按钮选择

1 个答案: