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

Question

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

代码如下:http://codepen.io/covanant/pen/GJZYLq

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

该元素是:

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

您可以看到它显示在演示中的第一个问题中，我希望它的工作方式是每当我单击全部关闭按钮时，它就会在.selected-中淡出答案元素，当我单击全部打开时，它将淡出 .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 .