Question

我有以下代码：

<div class="form-group red">
                <label for="q_11">11.   Met hoeveel personen woonde u het afgelopen jaar in uw woning?</label>
                <input name="q_11" value="" class="form-control" id="q_11" placeholder="Vul een getal in" required="" type="number">
              </div>

我想在输入字段发生变化时从div中删除“red”类，但不知何故我无法让它工作。我试过以下：

$('.red > input').on('change', function() {
      $(this).removeClass("red");
  });

我还有另一种情况，输入字段嵌套在“form-check”div

中

<div class="form-group red">
                <h6>7.  Hoeveel kWh hebben uw zonnepanelen het afgelopen jaar opgeleverd</h6>
                <div class="form-check">
                  <input class="form-check-input" required="" name="q_7" id="q_7_1" value="1" type="radio">
                  <label class="form-check-label" for="q_7">
                    Ik heb geen zonnepanelen bij mijn woning
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" name="q_7" id="q_7_2" value="2" type="radio">
                  <label class="form-check-label" for="q_7">
                    <input class="form-control-sm form-control" name="q_7_number" id="q_7_number" type="number">
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" name="q_7" id="q_7_3" value="3" type="radio">
                  <label class="form-check-label" for="q_7">
                    Ik heb zonnepanelen maar weet de opbrengst niet
                  </label>
                </div>
              </div>

对于这个我尝试过：

$('.red.form-check > input').on('change', function() {
      $(this).removeClass("red");
  });

但这又是行不通的。我希望有人可以帮我解决这个问题

Answer 1

当你这样做时

$('.red > input').on('change', function() {
      $(this).removeClass("red");
});

$(this)引用输入，但您想从父项中删除它。所以使用：

$(this).parent().removeClass("red");

示例：

＆＃13;

$('.red > input').on('change', function() {
      $(this).parent().removeClass("red");
  });

＆＃13;

.red {
color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group red">
                <label for="q_11">11.   Met hoeveel personen woonde u het afgelopen jaar in uw woning?</label>
                <input name="q_11" value="" class="form-control" id="q_11" placeholder="Vul een getal in" required="" type="number">
              </div>

＆＃13;

Answer 2

尝试使用keyup事件。这会在释放密钥时立即触发。

$('.red > input').keyup(function() {
   $(this).parent("div").removeClass("red");
});

Answer 3

如果我们谈论一次使用，我通常会尝试定位id，如果不是尝试使用类来使一个更容易的倾听者。

您必须使用.parent()功能才能访问父类列表。

当我们怀疑console.log时，您会看到this是输入而没有父

另外，如果您正在使用jQuery，请利用其语法并使用下一个侦听器

.change( function() {});

＆＃13;

$('#q_11').change( function() {
  $(this).parent().removeClass("red");
  console.log("hi");
});

＆＃13;

.red { color:red;
background:red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group red">
  <label for="q_11">11.   Met hoeveel personen woonde u het afgelopen jaar in uw woning?</label>
  <input name="q_11" value="" class="form-control" id="q_11" placeholder="Vul een getal in" required="" type="number">
</div>

＆＃13;

Answer 4

看起来你的目标是输入。尝试这样的事情：

$('.red > input').on('change', function() {
    $(this).parent().removeClass("red");
});

这将定位父项，而不是您正在测试更改的元素。

使用JSFiddle：https://jsfiddle.net/webdevsoup/bemjzoap/6/

Answer 5

选择器是问题所以我纠正了它。 ONCHANGE它从包含红色

的元素中删除了“红色”类

Private Sub UserForm_QueryClose(Cancel As Integer, CloseMode As Integer)
' Reset old locationcode if form is aborted by user via [x}
If CloseMode = VbQueryClose.vbFormControlMenu Then
    Cancel = True
    locationCode = locationCodeOld
    locationCodeOld = ""
    Me.Hide
End If
End Sub

$(".red >.form-check> input ,.red > .form-check > .form-check-label> input[type=number]").on("change",function(){
  $('.red').removeClass('red');
});

.red{
color:red
}

更改嵌套输入字段

5 个答案: