如何将 .change 函数从 jQuery 迁移到纯 Javascript

How to migrate a .change function from jQuery to plain Javascript

本文关键字：迁移 Javascript jQuery change 函数      更新时间：2023-09-26

我不是JS专家，但我认为我想做的非常简单（至少在jQuery中）

我有 3 个选择

  <select id="faq" class="onchance_fill">...</select>
  <select id="pages" class="onchance_fill">...</select>
  <select id="faq" class="onchance_fill">...</select>

和一个输入（它是 advlink 插件中的微小 MCE）

<input type="text" onchange="selectByValue(this.form,'linklisthref',this.value);" value="" class="mceFocus" name="href" id="href" style="width: 260px;">

我希望每次更改 3 个选择之一中的值时，该选项的该值都将放置在输入中。

在Jquery中，它将是这样的：

$('.ajax_onchance_fill').change(function() {
        data = $('.ajax_onchance_fill').val();
        $('#href').text(data);
    });

但我不能使用它。那么普通的Javascript中的等价物是什么？

谢谢

我建议你继续使用 Jquery，因为它可以加速这种事情，但在纯 JavaScript 中，我认为你想要的东西看起来像这样......

 <script type="text/javascript">
  function load() {
  var elements = document.getElementsByClassName('onchance_fill');
  for(e in elements){
      elements[e].onchange = function(){
          document.getElementById('href').value = this.value;
     }       
  }
  }
</script>

document.getElementsByClassName("ajax_onchance_fill").onchange = function() { 
   getElementById('href').value = this.options[this.selectedIndex].text;
};

虽然我不确定它是否有效，因为getElementsByClassName返回超过 1 个元素。

试试这个：

$('.ajax_onchance_fill').change(function() {
        var data = $(this).val();
        $('#mytextboxid').val(data);
    });

好的，所以我意识到这个线程已经超过 8 年了，所以这个答案对于 OP（他们可能很久以前就想通了）来说并不重要，因为它适用于可能对这个特定主题感到好奇的其他人。

综上所述，这里有一个相对简单和可靠的方法，你可以在vanilla JS中完成它：

/**
 * Since we need to listen to all three ajax_onchance_fill elements,
 * we'll use event delegation.
 * 
 */
const targetLink = document.getElementById('href'); 
    document.addEventListener('change', function(e) {
        if (!!Element.prototype.matches) { // Let's make sure that matches method is supported...
            if (e.target.matches('.ajax_onchance_fill')) {
                targetLink.textContent = e.target.value;
            }
        } else { // and if not, we'll just use classList.contains...
            if (e.target.classList.contains('ajax_onchance_fill')) {
                targetLink.textContent = e.target.value;
            }
        
        }   
    });
相关文章：