Question

我是一名处理多页Q＆amp; A表单的UI设计师，我是jQuery的初学者，主要是将代码片段混合在一起。

以下是代码：http://codepen.io/covanant/pen/GJZYLq

表单的这一部分基本上是多个手风琴包裹在标签中，我的大部分都按需要工作，但我需要做的事情之一就是每当我选择或选择时，我希望能够输出该元素的选项作为问题下方的文本。

元素是：

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

你可以在演示的第一个问题中看到它，我喜欢它的工作方式是每当我点击全部关闭按钮时，它就会淡入。选择答案元素，当我点击全部打开时，它将淡出.selected-answer元素。

按钮：

<a href="#" class="btn btn-default openall">Open All</a>
<a href="#" class="btn btn-default closeall">Close All</a>

jQuery的：

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

Answer 1

首先，为每个选择选项赋予相同的值属性是没有意义的。按照惯例，这些应该是截然不同的。如果您没有使用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>

一旦整理完毕，您需要上移DOM层次结构并找到要更改的正确span元素。

$('select').on('change', function() {
  var span = $(this).closest('div.panel').find('span.selected-answer');
  span.text($(this).val());
});

对于复选框问题，我会做这样的事情： HTML：

<span class="selected-answer">
    <ul class="checked-options">
        <li data-check="checkbox1">nWifi (nLight)</li>
        <li data-check="checkbox2">nLightFixtures</li>
        <li data-check="checkbox3">xCella (LC&D)</li>
        <li data-check="checkbox4">Daylight Harvesting</li>
        <li data-check="checkbox5">xPoint (LC&D)</li>
        <li data-check="checkbox6">nWifi (nLight)</li>                         
    </ul>
</span>

CSS：

.checked-options li {
  display: none;
}

jQuery的：

$('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
});

此外，根据您是否希望在首次加载表单时默认打开或关闭所有问题，您可能需要隐藏页面加载时的所有.selected-answer元素。

这是更新的codepen。

Answer 2

我同意VCode对option元素中的每个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();

以下是我的修改后的codepen链接：http://codepen.io/anon/pen/ZGpXXK

将输入选择输出为元素

2 个答案: