Question

我在 JQuery 的小项目中工作，我在从html元素中删除错误类时遇到问题。

我使用$('selector').on('input')来获取事件并删除input类，我的问题是当使用JavaScript生成字段时;

示例

＆＃13;

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

在这种情况下，我在#two更改时更改#one值，#one删除.example，但#two不要

我需要从.example #two

中删除input课程

编辑：我想以通用的方式进行，因为我的项目中有很多这种情况

是否有某种方法可以触发这种变化？

非常感谢！

Answer 1

在true语句的if分支内，使用 .nextAll() 方法以及选择器查找下一个input语句this。这样，当第一个输入删除了类时，它后面的下一个输入也将删除它的类。

另外，更改您的input事件设置，以便将其设置为首先处理某个类的input元素，并为每组input提供第一个那个班。

$('#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">

Answer 2

也许我下面写的代码可以帮到你。它并不完美，但它是一个很好的起点。
我添加了一个自定义属性，我将apply称为相同＆＃34; group＆＃34;的输入。我还修改了data-group的监听器，使得从单个监听器功能中，您将听取所有输入。

检查这是否对您有所帮助。

＆＃13;

input

＆＃13;

$('.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);
});

＆＃13;

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

＆＃13;

Answer 3

如果当前字段#one使用documentation：

，则可以进行检查

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


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

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

       }

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

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

3 个答案: