代码之家 › 专栏 › 技术社区 › Juan Salvador Portugal

javascript更改输入值时触发更改或输入

event-handling html jquery javascript

Juan Salvador Portugal · 技术社区 · 6 年前

我正在和 JQuery ,我在从html元素中删除错误类时遇到问题。

我正在使用 $('selector').on('input') 获取事件并删除 input 类,我的问题是该字段是用JavaScript生成的;

实例

  $('#one').on('input',function(){
        $('#two').val(  $('#one').val()  );
    });


    $(':input').on('input', function ()
    {
        if ($(this).hasClass('example'))
        {
            $(this).removeClass('example');
        }
    });

 .example
    {
        color: orange;
        background-color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Normal Case</h2>
        <input type="text" class="example">

        <h2>Problem</h2>
        <label for="one">#ONE</label>
        <input type="text" class="example" id="one">
        <br/>
        <label for="two">#TWO</label>
        <input type="text" class="example" readonly="readonly" id="two">

在这种情况下,我会改变 #two 值时 #one 更改, #一个 去除 .example 但是 #两个 不要

我需要删除 实例 分类自 #两个 输入

编辑: 我想用一种通用的方式来做,因为我的项目中有很多这样的案例

有什么方法可以触发这种变化吗?

非常感谢!

3 回复 | 直到 6 年前

Calvin Nunes 6 年前

也许我下面写的代码对你有帮助。这并不完美,但这是一个很好的起点。
我添加了一个我调用的自定义属性 data-group 对于相同“组”的输入。
我还修改了侦听器 input 在某种程度上,从单个侦听器函数中,您将有所有输入都在侦听。

检查这是否对您有帮助。

$('.example').on('input',function(){
    var value = this.value; 
    var groupName = $(this).attr('data-group');
    var groupElems = $("[data-group='"+groupName+"']");
    groupElems.removeClass('example');
    groupElems.val(value);
});

.example
    {
        color: orange;
        background-color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="example" data-group="group1" id="one">
<br/>
<label for="two">#TWO</label>
<input type="text" class="example" data-group="group1" readonly="readonly" id="two">

        <h2>Problem</h2>
<label for="three">#THREE</label>
<input type="text" class="example" data-group="group2" id="three">
<br/>
<label for="four">#FOUR</label>
<input type="text" class="example" data-group="group2" readonly="readonly" id="four">

        <h2>Problem</h2>
<label for="five">#FIVE</label>
<input type="text" class="example" data-group="group3" id="five">
<br/>
<label for="six">#SIX</label>
<input type="text" class="example" data-group="group3" readonly="readonly" id="six">

Scott Marcus 6 年前

内部 true 您的分支机构 if 语句,使用 .nextAll() 方法,以及用于查找下一个 input 下列的 this 。这样,当第一个输入删除了类时,接下来的下一个输入也将删除其类。

另外,更改 输入 事件设置,以便将其设置为工作 输入 将某个类的元素放在第一位,并给出每组元素的第一个 输入 是那个班。

$('#one').on('input',function(){
  $('#two').val(  $('#one').val()  );
});

// Only when an input with the "input" class gets input
$('input.input').on('input', function () {
  if ($(this).hasClass('input')) {
     $(this).removeClass('input');
     
     // Find the next input sibling that follows "this"
     $(this).nextAll("input").removeClass("input");
  }
});

.input {
  color: orange;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Normal Case</h2>
<input type="text" class="input">

<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="input" id="one">
<br>
<label for="two">#TWO</label>
<input type="text" class="input" readonly="readonly" id="two">

Saturnin 6 年前

如果当前字段为 #one 使用 .is() :

$(':input').on('input', function () {


       if(($(this).is("#one"))) {

            if ($('#two').hasClass('example'))
            {
                $('#two').removeClass('example');
            }

       }

       if ($(this).hasClass('example'))
       {
           $(this).removeClass('example');
        }
});