jQuery:如何为多组单选按钮重用相同的功能

Question

我有一个HTML表单,其中包含格式为单选按钮的多选答案的问题.

当用户对其中一个问题回答"是"时,会显示补充问题.该功能检测单选按钮输入的"是"值.

如果我需要在用户回答"是"时显示一个额外的问题,我可以在其他"是"/"否"问题上重复使用相同的功能 - 我只需将"切换"类应用于无线电输入,然后设置data-target用于匹配我想要显示的隐藏问题块的ID 的属性.

但是,我无法在表单中的其他问题上重复使用相同的功能,因为大多数问题没有"是"/"否"答案.大多数输入值属性都是唯一的.

如何使函数可重用,以便我可以在任何问题上应用相同的"toggle"类以显示目标块,而不是为每个需要补充问题的答案创建单独的函数？

下面是表单的简化示例 - 只有四个示例问题.第一个和最后一个问题具有是/否答案值,另外两个问题具有不同的答案值:

$(document).ready(function() {
  $("input.toggle:radio").change(function() {
    if ($(this).val() == "yes") {
      $("#" + $(this).data("target")).slideDown();
    } else {
      $("#" + $(this).data("target")).slideUp();
    }
  });
});

.extra {
  display: none;
}

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

<form>
  <div class="question">
    <p><b>Question 1: Do you have a driving licence?</b></p>
    <label><input type="radio" class="toggle" name="question1" value="no" data-target="extra-box1"> No</label>
    <label><input type="radio" class="toggle" name="question1" value="yes" data-target="extra-box1"> Yes</label>
    <div id="extra-box1" class="extra"><i>If user clicks 'Yes', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 2: What's your favourite primary colour?</b></p>
    <label><input type="radio" class="toggle" name="question2" value="red" data-target="extra-box2"> Red</label>
    <label><input type="radio" class="toggle" name="question2" value="yellow" data-target="extra-box2"> Yellow</label>
    <label><input type="radio" class="toggle" name="question2" value="blue" data-target="extra-box2"> Blue</label>
    <div id="extra-box2" class="extra"><i>If user clicks 'Yellow', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 3: What is your employment status?</b></p>
    <label><input type="radio" class="toggle" name="question3" value="employed" data-target="extra-box3"> Employed</label>
    <label><input type="radio" class="toggle" name="question3" value="unemployed" data-target="extra-box3"> Unemployed</label>
    <div id="extra-box3" class="extra"><i>If user clicks 'Unemployed', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 4: Do you own your own home?</b></p>
    <label><input type="radio" class="toggle" name="question4" value="no" data-target="extra-box4"> No</label>
    <label><input type="radio" class="toggle" name="question4" value="yes" data-target="extra-box4"> Yes</label>
    <div id="extra-box4" class="extra"><i>If user clicks 'Yes', show this block</i></div>
  </div>
  
</form>

感谢您提供的任何建议!

Answer 1

可能有多种方法可以做到这一点,我提出的一个方法就是你可以show在单选按钮上添加一些课程说明,点击它就可以显示div.extra

看下面的代码......

$(document).ready(function() {
  $("input.toggle:radio").change(function() {
    if ($(this).hasClass("show")){
      $("#" + $(this).data("target")).slideDown();
    } else {
      $("#" + $(this).data("target")).slideUp();
    }
  });
});

.extra {
  display: none;
}

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

<form>
  <div class="question">
    <p><b>Question 1: Do you have a driving licence?</b></p>
    <label><input type="radio" class="toggle" name="question1" value="no" data-target="extra-box1"> No</label>
    <label><input type="radio" class="toggle show" name="question1" value="yes" data-target="extra-box1"> Yes</label>
    <div id="extra-box1" class="extra"><i>If user clicks 'Yes', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 2: What's your favourite primary colour?</b></p>
    <label><input type="radio" class="toggle" name="question2" value="red" data-target="extra-box2"> Red</label>
    <label><input type="radio" class="toggle show" name="question2" value="yellow" data-target="extra-box2"> Yellow</label>
    <label><input type="radio" class="toggle" name="question2" value="blue" data-target="extra-box2"> Blue</label>
    <div id="extra-box2" class="extra"><i>If user clicks 'Yellow', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 3: What is your employment status?</b></p>
    <label><input type="radio" class="toggle" name="question3" value="employed" data-target="extra-box3"> Employed</label>
    <label><input type="radio" class="toggle show" name="question3" value="unemployed" data-target="extra-box3"> Unemployed</label>
    <div id="extra-box3" class="extra"><i>If user clicks 'Unemployed', show this block</i></div>
  </div>
  
  <div class="question">
    <p><b>Question 4: Do you own your own home?</b></p>
    <label><input type="radio" class="toggle" name="question4" value="no" data-target="extra-box4"> No</label>
    <label><input type="radio" class="toggle show" name="question4" value="yes" data-target="extra-box4"> Yes</label>
    <div id="extra-box4" class="extra"><i>If user clicks 'Yes', show this block</i></div>
  </div>
  
</form>