javascript - jQuery 无法根据选择选项显示/隐藏元素

Question

我正在构建一个 WordPress 小部件，它允许用户在定制器预览中构建一个简单的表单。

我的表单构建器的一部分是有一个下拉选择输入，其中列出了多个表单元素(文本、文本区域、选择、复选框...等)，如果用户选择 select、checkbox 或 radio 作为表单元素，然后通过 jQuery 显示包含文本区域的 div，用户可以在其中列出这些元素的选项。

显然，用户可以添加无限的元素，因此我为选项的每个下拉列表和每个容器 div 动态分配一个 id，以便我可以为用户添加的每个元素显示/隐藏它们。

这是我的简化 html 标记，显示了我所拥有的本质。您将看到用户可以在其中选择表单元素的下拉列表，以及包含文本区域的 div。因为每个下拉列表都与一个文本区域相关，所以我在它们上面添加了 jQuery 代码来显示/隐藏文本区域容器:

<script>
  jQuery(document).ready(function($) {
    var arr = ['select', 'checkbox', 'radio'];
    var thisForm = '#select-input-118 select.input_type';

    function showHideSelect() {
      var val = $(thisForm + ' option:selected').val();
      var selectOptions = $('#select-options-118')

      if (arr.indexOf(val) >= 0) {
        selectOptions.show();
      } else {
        selectOptions.hide();
      }
    }

    jQuery(document).ready(function($) {
      showHideSelect();

      $(thisForm).change(function() {
        showHideSelect();
      });
    });

  });

</script>
<p id="form_builder_input_type select-input-118" class="layers-form-item layers-column layers-span-9">
  <label for="widget-layers-widget-form_builder-3-input_type">Input Type</label>
  <select size="1" id="widget-layers-widget-form_builder-3-form_builders-118-input_type" name="widget-layers-widget-form_builder[3][form_builders][118][input_type]" placeholder="Select a form item" class="input_type">
    <option value="">Select a form item</option>
    <option value="text" selected="selected">
      Text </option>
    <option value="email">
      Email </option>
    <option value="textarea">
      Text Area </option>
    <option value="select">
      Drop Down Menu </option>
    <option value="checkbox">
      Checkbox </option>
    <option value="radio">
      Radio Buttons </option>
  </select>
</p>

<div id="select-options-118">
  <p id="select_options" class="layers-form-item">
    <label for="widget-layers-widget-form_builder-3-form_builders-118-select_options">Select Options</label>
  </p>
  <p style="background:#f5f5f5; padding:10px 20px; margin-bottom:20px;">One option per line</p>
  <textarea id="widget-layers-widget-form_builder-3-form_builders-118-select_options" name="widget-layers-widget-form_builder[3][form_builders][118][select_options]" placeholder="Add your options here" class="layers-text"></textarea>
  <p></p>
</div>

由于用户可以创建无限数量的表单元素，因此 id 会通过 php 动态插入到元素和 jQuery 代码中 - 我刚刚从此处输出的 html 中获取了一个片段。 You can see a jsfiddle also here

这里的想法是，对于每个下拉列表，如果用户选择“选择”、“复选框”或“单选”。包含选项文本区域的 div 显示，在所有其他情况下它隐藏。

我有两个问题:1) 我的 jQuery 代码无法运行，我不明白为什么2)有没有更好的方法让我编写这个代码，而不是为下拉/文本区域的每个实例都编写一个jquery片段？即我可以编写一段全局 jQuery 代码来将此函数添加到所有实例吗？

Answer 1

问题是您的更改事件发生在表单上，​​而不是元素上。如果您将 thisform 设置为 '#widget-layers-widget-form_builder-3-form_builders-118-input_type'，它就可以工作。

参见https://jsfiddle.net/tghw/46stb05y/3/