jquery 如果输入字段发生任何更改,如何触发事件

bsxbgnwa  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(101)

我已经写了一个代码,它的工作原理的变化,但现在我也期待到页面加载和任何事情发生在输入字段,其中有特定的类一样模糊或oninput或粘贴或什么,它应该触发代码和时刻的价值是超过0.00,它应该运行代码,并显示标签块
这是我的代码

document.addEventListener('readystatechange', function(e) {
    switch (e.target.readyState) {
      case "complete":
        $('.totalsTeal').trigger('change');
        break;
      }
    });

字符串
下面是change事件的编写方式

$(document).on('change focus blur', '.totalsTeal', function() {
    let self = $(this);
    let day = self.attr('data-name');
    if (self.val() === "0.00") {
      $('#w1_' + day).parent().find('label').css('display', 'none');
    } else {
      $('#w1_' + day).parent().find('label').css('display', 'block');
    }
});


上面的代码显示了我所做的和我试图编写的内容

00jrzges

00jrzges1#

使用input事件,它在输入字段接收到任何输入时触发。
这实际上是一个微不足道的操作,在JQuery中并没有变得简单得多。此外,你应该使用CSS类,而不是使用内联样式,因为内联样式更难以覆盖,并可能导致代码重复。
将下面的代码放在<script>元素中,并将该元素放在关闭的body标记之前,就完成了。

// Get a reference to the element where the message will be
// FYI: A label is not meant for this.
const output = document.querySelector(".hidden");

// Set up an input event handler on the input field
// The event will trigger as any kind of input happens to the field
document.querySelector(".foo").addEventListener("input", function(e) {
  // All values that come from HTML are strings.
  // Prepending that string with + implicitly converts it to a number
  if(+this.value > 0){
     // Remove the hidden CSS class to reveal element
     output.classList.remove("hidden");
  } else {
     // Apply the hidden CSS class to hide the element
     output.classList.add("hidden");
  }
});
/* When possible, use CSS classes instead of  inline styles. */
.hidden { display:none; }
<input class="foo" type="number">
<div class="hidden">Message Here</div>
jhdbpxl9

jhdbpxl92#

请保持一致-使用纯JS或jQuery,请不要混合使用。
jQuery

$(function() {
  $('.totalsTeal').on('input', function() {
    console.log(this.value, this.value === '0.00')
    const day = $(this).data('name');
    $('#w1_' + day).closest('.parentDiv').find('label')
      .toggle(+$(this).val() !== 0)
  }).trigger('input');
});

个字符
香草JS

window.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('container')
  container.addEventListener('input', (e) => {
    const tgt = e.target.closest('.totalsTeal'); // in case it has children
    if (!tgt) return; // not a .totalsTeal or child thereof
    const day = tgt.dataset.name;
    console.log(day,`w1_${day}`)
    document.getElementById(`w1_${day}`).closest('div').querySelector('label').hidden = +tgt.value !== 0;
  });
  container.querySelectorAll('.totalsTeal').forEach(inp => {
    console.log(inp.value)
    inp.dispatchEvent(new Event('input', {
      bubbles: true,
      cancelable: true
    }));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div id="container">
  <div class="parentDiv">
    <input class="totalsTeal" type="number" value="0.00" data-name="x">
    <span id="w1_x">Not sure what wl is</span>
    <label hidden>Message Here</label>
  </div>
  <div class="parentDiv">
    <input class="totalsTeal" type="number" value="1.00" data-name="y">
    <span id="w1_y">Not sure what w1 is</span>
    <label hidden>Message Here</label>
  </div>
  <div class="parentDiv">
    <input class="totalsTeal" type="number" value="2.00" data-name="z">
    <span id="w1_z">Not sure what w1 is</span>
    <label hidden>Message Here</label>
  </div>
</div>

的字符串

相关问题