javascript - 隐藏多个 HTML 元素并显示它们或将它们附加到单独的部分

Question

对于提前提出的长问题，我深表歉意。不过，我非常感谢任何愿意在这里提供帮助的人......

我有一个表单，用户可以在其中选择选项，然后单击“生成文本”，并为其情况生成注释。我正在研究的这一特殊笔记很复杂，有 7 种不同的书写方式。

话虽如此。我想做的是让用户从下拉列表中进行选择(是的，我知道这不是最好的选择，但由于一致的用户体验要求，我已经被逼到了 Angular 落)。根据用户选择的选项，我希望不同的用户输入选择与“基本”注释一起显示(理想情况下)。这是基调的一个想法:

<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 的编写方式，它将获取注释文本中 select 的值(我删除了一些专有信息)。

以前，我使用了基于下拉列表值的 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

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

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

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>