Question

我很抱歉提前提出这个问题。但是，我非常感谢愿意在这里提供帮助的人......

我有一个用户选择选项的表单，然后单击＆＃34;生成文本＆＃34;并为他们的情况生成一个注释。我正在处理的这个特别注意事项很复杂，有7种不同的方式可以编写。

随着说。我想要做的是让用户从下拉列表中选择（是的，我知道它不是最好的选择，但由于一致的用户体验要求，我已经在角落里得到了支持）。根据用户选择的选项，我想要一个不同的用户输入选择显示内联（理想情况下）＆＃34; base＆＃34;注意。以下是基调的概念：

<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。然后，您可以在$('#' + this.value)事件处理程序中使用change来选择要显示的元素。此外，将DOM查询从所有事件处理程序中提升到$('.part')，这样就不会多次运行它。您可以使用.show()和.hide()来控制元素是否也显示，而不是.css()。

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

＆＃13;

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

＆＃13;

#hidden-area {
  display: none;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: