Javascript 将输入选择作为文本输出到元素

我是一名处理多页问答表单的UI设计师，我是jQuery的初学者，主要是将代码片段混合在一起

代码如下：

表单的这一部分基本上是多个手风琴包装到选项卡中，我让它的大部分按要求工作，但我需要做的一件事是，每当我选择一个选项或选项时，我希望能够将该选项作为问题正下方的文本输出到元素

要素是：

<span class="selected-answer"></span>

---

首先，给每个选择选项赋予相同的值属性是没有意义的。按照惯例，这些应该是不同的。如果不使用value属性，可以将其全部删除。否则，应将其更改为以下内容：

<select>
    <option value="None Selected">None Selected</option>
    <option value="Photocell On">Photocell On</option>
    <option value="Off Control Only">Off Control Only</option>
    <option value="Photocell On / Off Control Only">Photocell On / Off Control Only</option>
</select>

对于复选框问题，您可以这样做： HTML:

jQuery：

// Open All & Close All buttons
$('.closeall').click(function(){
  $('.panel-collapse.in')
    .collapse('hide');
});
$('.openall').click(function(){
  $('.panel-collapse:not(".in")')
    .collapse('show');
});

$('input[type="checkbox"]').on('change', function() {
  var checkbox = $(this);
  var id = checkbox.attr('id');

  if ($(this).prop('checked'))
    $('li[data-check="' + id + '"]').show();
  else
    $('li[data-check="' + id + '"]').hide();
});

至于褪色，这应该可以做到：

// Open All & Close All buttons
$('.closeall').click(function(){
  $('.panel-collapse.in')
    .collapse('hide');
  $('.selected-answer').fadeIn();// <-- Fade in
});
$('.openall').click(function(){
  $('.panel-collapse:not(".in")')
    .collapse('show');
  $('.selected-answer').fadeOut();// <-- Fade out
});

//全部打开&全部关闭按钮
$（'.closeall'）。单击（函数（）{
$（'.panel collapse.in'）
.坍塌（“隐藏”）；
$（'.selected answer'）.fadeIn（）；//我同意VCode对
select
元素中的每个
选项使用不同的值。但是，我认为您应该使用实际的标签，这样您可以比选项值有更多的描述标签，而不是使用您为每个选项提供的值

我修改了一些现有函数以实际填充所选答案。首先，我注意到您已经有了一个函数来处理对所选答案的更改-在其中，我添加了一个小片段以获取所选答案并将其传递给
nextQuestion

$(".panel-body select").change(function() {
  var selectElem = $(this);
  var answer = selectElem.find("option:selected").text();
  nextQuestion(selectElem, answer);
});

然后还有输入元素。这是修改后的输入更改函数：

$(".panel-body input").change(function() {
  var inputElem = $(this);
  var inputType = inputElem.attr('type');
  // common parent for input
  var commonParent = inputElem.closest(".panel-body");
  var answers = commonParent
    .find("input:checked")
    .closest("."+inputType)
    .find("label")
    .map(function(){return this.innerText;})
    .get()
    .join(", ");
  nextQuestion(inputElem, answers);
});

现在，正如您可能已经注意到的，我向nextQuestion函数添加了一个参数。我将此代码放在nextQuestion中，因为您已经在访问父函数，所以我想重新使用该逻辑填充选定的答案

function nextQuestion(currentQuestion,selectedAnswer) {
  var parentEle = currentQuestion.parents(".panel");
  if (arguments.length>1) {
    parentEle.find('.selected-answer').text(selectedAnswer);
  }
  if (parentEle.next()) {
    parentEle.find(".fa-question").addClass("fa-check check-mark").removeClass("question-mark fa-question").text("");
  }
}

就像前面提到的VCode一样，您可以使用fadeIn/fadeOut对答案进行淡入淡出

// Open All & Close All buttons
$('.closeall').click(function(){
  $('.panel-collapse.in')
    .collapse('hide');
  $('.selected-answer').fadeIn();// <-- Fade in
});
$('.openall').click(function(){
  $('.panel-collapse:not(".in")')
    .collapse('show');
  $('.selected-answer').fadeOut();// <-- Fade out
});
// hide all .selected-answers
$('.selected-answer').hide();

//全部打开&全部关闭按钮
$（'.closeall'）。单击（函数（）{
$（'.panel collapse.in'）
.坍塌（“隐藏”）；
$（'.selected answer'）.fadeIn（）；//除了单选按钮外，它还能工作，知道为什么吗？我没有意识到单选输入的父项使用的是
.radio
类。我更新了我的答案和代码笔，使之也能与收音机一起工作
$(".panel-body select").change(function() {
  var selectElem = $(this);
  var answer = selectElem.find("option:selected").text();
  nextQuestion(selectElem, answer);
});

$(".panel-body input").change(function() {
  var inputElem = $(this);
  var inputType = inputElem.attr('type');
  // common parent for input
  var commonParent = inputElem.closest(".panel-body");
  var answers = commonParent
    .find("input:checked")
    .closest("."+inputType)
    .find("label")
    .map(function(){return this.innerText;})
    .get()
    .join(", ");
  nextQuestion(inputElem, answers);
});

function nextQuestion(currentQuestion,selectedAnswer) {
  var parentEle = currentQuestion.parents(".panel");
  if (arguments.length>1) {
    parentEle.find('.selected-answer').text(selectedAnswer);
  }
  if (parentEle.next()) {
    parentEle.find(".fa-question").addClass("fa-check check-mark").removeClass("question-mark fa-question").text("");
  }
}

// Open All & Close All buttons
$('.closeall').click(function(){
  $('.panel-collapse.in')
    .collapse('hide');
  $('.selected-answer').fadeIn();// <-- Fade in
});
$('.openall').click(function(){
  $('.panel-collapse:not(".in")')
    .collapse('show');
  $('.selected-answer').fadeOut();// <-- Fade out
});
// hide all .selected-answers
$('.selected-answer').hide();