隐藏几个HTML元素，并向它们展示或附加到单独的部分

Question

我为提前的长期问题感到抱歉。但是，我非常感谢任何愿意在这里提供帮助的人...

我有一个表格，用户选择选项，然后单击"生成文本"，并为其情况生成注释。我正在研究的这一特殊说明很复杂，并且具有7种不同的方式。

话。我想做的是让用户从下拉列表中选择（是的，我知道这不是最好的选择，但是由于一致的用户体验要求，我在角落里备份了）。基于用户选择的选项，我希望使用"基本"注释的内联（理想方式）出现不同的用户输入选择。这是基本注释的想法：

<div class="note" id="504">
        <p class="item" id="p504">
          <input type="radio" checked>
          This is the beginning of the note
          <select id="partSelect">
            <option value=""></option>
            <option value="Option 1 ">Option 1</option>
            <option value="Option 2 ">Option 2</option>
            <option value="Option 3 ">Option 3</option>
            <option value="Option 4 ">Option 4</option>
            <option value="Option 5 ">Option 5</option>
            <option value="Option 6 ">Option 6</option>
            <option value="Option 7 ">Option 7</option>
          </select></p>

请注意，该值中有几个空间。这是因为JS的写作方式，它将在注释文本中获取选择的值（我正在删除一些专有信息）。

以前，我已经根据下拉列表的值，然后使用switch()语句，然后使用将隐藏和显示部分的大型代码块。示例：

    $("#part1").css("display","none");  
    $("#part2").css("display","inline");
    $("#part3").css("display","none");
    $("#part4").css("display","none");
    $("#part5").css("display","none");
    $("#part6").css("display","none");
    $("#part7").css("display","none");

我不想再这样做了。但是，我尝试做以下操作：

    $(".part").css("display","none");
    $("#part1").css("display","inline");

尚未工作。

理想情况下，我想找到div的内容，并将这些内容应用于基本注释的末尾，以便用户只需单击下拉框，该注释的末尾就取决于所选选项的变化。

有人有能力教我我能做的事情吗？

Answer 1

使用每个选项的value存储您要显示的元素的id。然后，您可以在change事件处理程序内使用$('#' + this.value)来选择要显示的元素。另外，将您的DOM查询从所有事件处理程序中提出到$('.part')，以免多次运行。您可以使用.show()和.hide()来控制元素是否也显示，而不是.css()。

编辑：如果在内联可见区域和隐藏的块区域之间使用变量内容切换节点，则可能不需要.show()和.hide()。请参阅下面的更新示例：

var parts = $('.part')
var content = $('#selected-content')
var templates = $('#hidden-area')
$('#partSelect').change(function () {
  content.contents().appendTo(templates)
  $('#' + this.value, templates).appendTo(content)
})

#hidden-area {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="note" id="504">
  <p class="item" id="p504">
    <input type="radio" checked/>
    This is the beginning of the note
    <select id="partSelect">
      <option value=""></option>
      <option value="part1">Option 1</option>
      <option value="part2">Option 2</option>
      <option value="part3">Option 3</option>
      <option value="part4">Option 4</option>
      <option value="part5">Option 5</option>
      <option value="part6">Option 6</option>
      <option value="part7">Option 7</option>
    </select>
    <span id="selected-content"></span>
  </p>
<p id="hidden-area">
  <span class="part" id="part1">Part 1</span>
  <span class="part" id="part2">Part 2</span>
  <span class="part" id="part3">Part 3</span>
  <span class="part" id="part4">Part 4</span>
  <span class="part" id="part5">Part 5</span>
  <span class="part" id="part6">Part 6</span>
  <span class="part" id="part7">Part 7</span>
</p>
</div>