javascript 如何在jquery中创建一个函数来迭代对象?

anauzrmj  于 2023-05-21  发布在  Java
关注(0)|答案(2)|浏览(183)

我有以下函数,它根据选择字段的值隐藏或显示字段的输入和标签:

function handle_select_change(obj) {
        var selectField = jQuery(obj);
        var selectedValue = selectField.val();
        var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea');

        if (selectedValue !== "multiple-choice") {
            textareaField.css("display", "none");
            textareaField.siblings().css("display", "none");

        } else {
            textareaField.val(""); 
            textareaField.css("display", "block");
            textareaField.siblings().css("display", "block");
        }   
        
    }

此函数适用于同一页面中的多个表单。我试图在文档准备好后立即触发此函数,以便它验证每个表单中选择字段的值。
在一个document ready函数中,我这样调用我的函数:

handle_select_change(jQuery('.cheryr-ui-repeater-content-box select'));

上面的选择器是一个对象,其中对象的每个索引都是一个选择字段。因此,如果我的页面中有表单,我将有一个长度为5的对象,每个索引选择字段到相应的表单。我如何迭代对象并在函数被触发时将其传递给函数?

gdx19jrr

gdx19jrr1#

使用选择器查找所有元素,然后循环遍历它们以调用函数。
大概是这样的:

const elements = document.querySelectorAll('.cheryr-ui-repeater-content-box > select');
[ ...elements ].forEach(e => handle_select_change(e));
z9gpfhce

z9gpfhce2#

首先,作为一个侧记,对于这样的问题,请包括您的HTML!它与问题相关,对回答者很有帮助
函数的第一行 Package 了jQuery(obj)传入的任何内容,因此当调用它时,只需传递选择器字符串,如下所示:

handle_select_change('.cheryr-ui-repeater-content-box select');

您只需要为所选元素设置一个change事件,并且您还可以通过利用jQuery的链式事件和.hide().show()方法来简化一些代码,而不是直接设置css显示属性。
我不得不猜测一些HTML结构,因为你没有包括任何。

function handle_select_change(obj) {
  var selectField = jQuery(obj);

  //add a change event for when the value of the select changes
  selectField.change(function(){
    var selectedValue = this.value;
    var textareaField = $(this).parents('.cheryr-ui-repeater-content-box').find('textarea');

    if (selectedValue !== "multiple-choice") {
      textareaField.add(textareaField.siblings())
                   .hide();
    } else {
      textareaField.val("")
                   .add(textareaField.siblings())
                   .show()
    }
  });

  //Trigger the above change event immediately
  selectField.trigger('change')
}

//----------------

$(function(){
  handle_select_change('.cheryr-ui-repeater-content-box select');
});
.cheryr-ui-repeater-content-box {
  border: 1px solid #CCC;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cheryr-ui-repeater-content-box">
  <select>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="multiple-choice">Multiple Choice</option>
  </select>
  <div>
    <label>Some text here</label>
    <textarea></textarea>
  </div>
</div>

<div class="cheryr-ui-repeater-content-box">
  <select>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="multiple-choice">Multiple Choice</option>
  </select>
  <div>
    <label>Some text here</label>
    <textarea></textarea>
  </div>
</div>

相关问题