javascript - jQuery 更改选择上的元素 - 用于多个选择输入的全局脚本

Question

我正在创建一个表单生成器脚本。我有一个选择输入，用户可以在其中选择他们想要使用的表单元素，具体取决于他们的选择(“选择”、“复选框”或“单选”)，显示另一个表单字段，允许用户输入他们的选项。

用户可以根据需要创建任意数量的表单元素实例，因此每个选择输入都有一个动态创建的 id，该 id 与隐藏表单字段的 id 相对应。然后，我使用 jQuery 来确定是否应隐藏“选项”字段(在表单元素选择输入更改时触发)。

目前，对于每个实例，我都在选择输入上方添加了以下代码:

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

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

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

    showHideSelect();

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

  });

</script>

其中var thisForm和var selectOptions是动态添加的，引用这个脚本下面的select选项。

我想知道是否有更好的方法来做到这一点，而不是重复几个实例，目前，用户页面看起来像这样:

<script>
...
</script>

<select>
...
</select>

<textarea>
This is hidden depending on the select option
</textarea>

<script>
...
</script>

<select>
...
</select>

<textarea>
This is hidden depending on the select option
</textarea>

<script>
...
</script>

<select>
...
</select>

<textarea>
This is hidden depending on the select option
</textarea>

...etc...etc

我担心的是，我认为拥有相同脚本的这么多实例不是最佳实践，但我不确定如何编写一个全局脚本来允许我在个人基础上显示/隐藏文本区域.

我在这里更准确地描述了我在这个 jsfiddle 上的工作: https://jsfiddle.net/46stb05y/4/

Answer 1

您可以使用事件委托(delegate)概念。 https://learn.jquery.com/events/event-delegation/

有了这个，您可以将代码更改为

$(document).on('change','select',function() { //common to all your select items
    showHideSelect($(this));  // passing the select element which trigerred the change event
  });

这甚至适用于动态添加的选定项目

您必须更改函数才能接收元素作为参数。

    function showHideSelect($selectElement) {      
    var val = $selectElement.val();
    var selectOptionsId =  $selectElement.attr('class').replace('input-type','select-options');
    var selectOptions = $("#"+selectOptionsId);

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

这是Working JsFiddle