Question

我有3个字段，用户可以输入数字a，b，c

因此，字段C将检查在字段C中输入的数字是否为＆lt; a和＆gt;湾

在表单中，我有一个按钮，可以创建一个额外的行另一个a，b，c;所以我不知道如何控制同样的操作...

$(".c").change(function() {

  if ($('.c').val() > $('.a').val() || $('.c').val() < $('.b').val()) {
    $('.c').css("backgroundColor", "#ff0000");
  } else {
    $('.c').css("backgroundColor", "#00FF00");
  }
});


$('.add').click(function() {

  var tr = '<tr>' + '<td>Cota1</td>' +
    '<td><input type="text" name="tol_cota1[]" class="form-control a"></td>' +
    '<td><input type="text" name="tolb_cota1[]" class="form-control b"></td>' +
    '<td><input type="text" name="medido_cota1[]" class="form-control c"></td>' +
    '<td><input type="button"  class="btn btn-danger remove" value="Remove Line"></td>' + '</tr>';

  $('.details').append(tr);


});

// delete row 
$('.details').delegate('.remove', 'click', function() {
  var con = confirm("Are you sure you want to remove the line?");
  if (con) {
    $(this).parent().parent().remove();
  }
});

Answer 1

最好的方法是使用最接近的功能

$(".c").change(function(){

        if($(this).val() > $(this).closest('.a').val() || $(this).closest('.c').val() < $('.b').val()) 
                {
         $(this).closest('.c').css( "backgroundColor", "#ff0000" );    
                }else{
                $(this).closest('.c').css( "backgroundColor", "#00FF00" );        
                }           
        });

Answer 2

change event没有气泡，这意味着您需要为表单中的每个输入都有一个事件监听器。

使用带有选择器的.on() method（第二个参数）时，

jQuery会自动处理这个问题，这相当于旧的已弃用的.delegate() method。根据官方文档中的描述，它将：

根据一组特定的根元素，为现在或将来与选择器匹配的所有元素的一个或多个事件附加一个处理程序。

所以，如果你做这样的事情：

$('.details').on('change', 'input', (event) => { ... });

这将在与change选择器匹配的所有元素内的任何<input>元素上侦听.details个事件，无论它们在调用方法时是否已存在，或者之后是否已创建这是你的情况。

现在，一旦发生change事件，您应该使用.parent()，.eq和.find()方法选择<input>所在的行触发事件的位置，从那里你可以根据它们的位置或选择器，它们的值得到所有3个输入，并按照你的逻辑来更新那个特定的行。

无论如何，如果您没有收听change事件，而是使用input，而这会冒泡，您可以从event delegation中受益。这意味着在这种情况下将为整个<tbody>创建单个事件侦听器，而不是每<input>一个。使用event.target，您将能够区分哪一个触发了事件，无论如何您需要使用该事件来获取同一行中的其他输入。

总之，它看起来像这样：

＆＃13;

// Better to keep the reference instead of getting it each time:

const details = $('#details'); 

details.on('input', 'input', (event) => {
    const children = $(event.target).parents().eq(1).children();
    const avgInput = children.eq(3).find('input');
    const max = parseInt(children.eq(1).find('input').val());
    const min = parseInt(children.eq(2).find('input').val());
    const avg = parseInt(avgInput.val());
    
    if (isNaN(max) ||isNaN(min)|| isNaN(avg)) {
      // Don't do anything if any of them is blank.
      
      return;
    }

    avgInput.css('backgroundColor', avg > max || avg < min ? '#ff0000' : '#00FF00');		
});

details.on('click', '.remove', (event) => {   
  if (confirm('Are you sure you want to remove the line?')) {
    $(event.target).parents().eq(1).remove();
  }
});

$('#add').click(() => {					  
  details.append(`
    <tr>
     <td>Cota1</td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><button class="remove">DELETE</button></td>
    </tr>
  `);
});

＆＃13;

body {
  font-family: sans-serif;
  font-size: .75rem;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  position: relative;
}

table th, 
table td {
  width: 20%;
  padding: 0;
  border-bottom: 1px solid #EEE;
  height: 1.75rem;
}

input {
  width: 100%;
  box-sizing: border-box;
  padding: .5rem;
  border: none;
  outline: none;
  text-align: center;
}

input:hover {
  background: #FAFAFA;
}

input:focus {
  background: #FFA;
}

.remove {
  width: 100%;
  box-sizing: border-box;
  padding: .5rem;
  border: none;
  outline: none;
  background: #FFF;
  cursor: pointer;
}

.remove:hover {
  background: #F44;
}

#add {
  width: 100%;
  border: none;
  background: #FFF;
  padding: .5rem;
  border-radius: 2px;
  color: #000;
  text-transform: uppercase;
  font-size: .75rem;
  margin: 1rem 0 0;
  box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
  transition: box-shadow ease-in .125s;
}

#add:hover {
  box-shadow: 0 0 .5rem rgba(0, 0, 0, .25);
}

＆＃13;

<table>
  <thead>
    <tr>
      <th> </th>
      <th>TOL +</th>
      <th>TOL -</th>
      <th>AVG</th>
      <th></th>
    </tr>	
  </thead>
  
  <tbody id="details">
    <tr>
     <td>Cota1</td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td> </td>
    </tr>
  </tbody>
</table>

<button id="add">ADD</button>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何使用具有数组的jquery处理新字段

2 个答案: