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并参考此脚本下方的选择选项。

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

<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

我担心的是，我不认为拥有相同脚本的这么多实例是最好的做法，但我不确定如何编写一个全局脚本，允许我个别地显示/隐藏textarea

我已经在这里更准确地描述了我在这个问题上的运作方式： https://jsfiddle.net/46stb05y/4/

Answer 1

您可以使用var testArr = [{"day_id":"1","b":"sss"}, {"day_id":"2","b":"ffff"}, {"day_id":"3","b":"ccc"}, {"day_id":"3","b":"hhh"}, {"day_id":"4","b":"kkk"}]; function getCount(arr,key,value){ var count = 0; arr.forEach(function(obj){ if(obj[key] == value){ count++; } }); return count; } console.log(getCount(testArr,'day_id','3')); //2概念。 https://learn.jquery.com/events/event-delegation/

使用此功能，您可以将代码更改为

Event Delegation

即使对动态添加的选项也是如此

您必须更改您的函数以接收元素作为参数。

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

以下是Working JsFiddle

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

1 个答案: