Question

我有这段代码修改了与所需表单元素的标签相关联的文本（由jquery验证器插件生成）：

 var phrases = Array('OK!', 'Sweet!', 'Nice!', 'On a roll!', 'Thanks!', 'Perfect!', 'You amaze me!');

 var election_date_phrase = phrases[Math.floor(Math.random()*phrases.length)] ;
 var another_element_phrase = phrases[Math.floor(Math.random()*phrases.length)] ;
 // and so on for each element

 $('body').on('DOMSubtreeModified', 'em#election_date_ul_form-error', function() {
   if ($(this).hasClass('valid') && $(this).text() === 'Ok!') {
     var phrase = election_date_phrase;
     $(this).text(phrase);
   }
 });

 $('body').on('DOMSubtreeModified', 'em#another_element_ul_form-error', function() {
   if ($(this).hasClass('valid') && $(this).text() === 'Ok!') {
     var phrase = another_element_phrase;
     $(this).text(phrase);
   }
 });
 // and so on for each element

显然，这段代码是重复的，我相信它可以被排除在外。对javascript不是很有经验，我在弄清楚如何做到这一点时遇到了一些麻烦。

尝试失败＃1 我觉得我可能会接近，但DOMSubTreeModified没有被触发（可能是因为它被包裹在一个函数中。

  var valid_phrase_changer = (function (element) {
      alert(element);
    var phrases = Array('OK!', 'Sweet!', 'Nice!', 'On a roll!', 'Thanks!', 'Perfect!', 'You amaze me!');
    var phrase = phrases[Math.floor(Math.random()*phrases.length)] ;
    return function (element, phrase) {
      $('body').on('DOMSubtreeModified', 'em#' + element + '-error', function() {
        if ($(this).hasClass('valid') && $(this).text() === 'Ok!') {
          $(this).text(phrase);
        }
      });
    };
  });

  valid_phrase_changer('election_desc_ul_form');

注意，对于每个元素，该短语必须是静态的。我希望每个元素都是一样的。

Answer 1

终于明白了。 Trick是使用forEach循环为每个元素创建代码。我认为我问题的主要部分是我仍然不熟悉js / jQuery语法并且忘记on只是一个带有三个参数的函数调用，而第三个参数是一个闭包。

 var phrases = Array('OK!', 'Sweet!', 'Nice!', 'On a roll!', 'Thanks!', 'Perfect!', 'You amaze me!');

 function valid_phrase_changer(elements) {
   elements.forEach(function(element) {
     var phrase = phrases[Math.floor(Math.random()*phrases.length)] ;
     $('body').on('DOMSubtreeModified', 'em#' + element + '-error', function () {
       if ($(this).hasClass('valid') && $(this).text() === 'Ok!') {
         $(this).text(phrase);
       }
     });
   });
 }

 valid_phrase_changer(['election_desc_ul_form', 'election_date_ul_form']);

创建一个动态生成其他代码的函数

1 个答案: