Question

我正在构建一个wordpress小部件，允许用户在自定义程序预览中构建一个简单的表单。

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

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

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

<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

这里的想法是，对于每个下拉列表，如果用户选择＆＃34;选择＆＃34;，＆＃34;复选框＆＃34;或＆＃34; radio＆＃34;。包含选项textarea的div在所有其他情况下显示它隐藏。

我有两个问题： 1）我的jQuery代码不起作用，我不明白为什么 2）有没有更好的方法来编写代码，而不是为每个dropdown / textarea实例都有一个jquery片段？即，我可以编写一个全局的jQuery代码，将该函数添加到所有实例吗？

Answer 1

问题是您的更改事件是在表单上，而不是元素。如果您将thisform设置为'#widget-layers-widget-form_builder-3-form_builders-118-input_type'，则会有效。

请参阅https://jsfiddle.net/tghw/46stb05y/3/

jQuery无法根据选择选项

1 个答案: