javascript - 单击更改颜色输入字段

Question

我正在使用 Bootstrap 4 并想通过单击按钮更改输入字段的背景颜色。

这是我的代码:

        <div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="txtres" readonly>
            </div>
        </div>

这是按钮:

<input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">

有人可以帮助我使用 jQuery 吗？

Answer 1

您可以将 .click 事件添加到您的按钮，然后使用 .css() 更改输入字段的颜色:

$('.color-btn').click(function() {
  $('.input-color').css({color: 'red', 'background-color': 'black'});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
  <div class="col-sm-10">
    <input value="Some text" class="input-color" type="text" class="form-control" name="txtres" readonly />
  </div>
</div>

<input type="button" class="color-btn btn btn-danger" value="Berechnen" />

在这里，我为您的按钮指定了 color-btn 类，以便使用 jquery 轻松定位它，并且还为您的文本框指定了 input-color 类。因此，任何具有 input-color 类的输入元素都可以在单击按钮时更改颜色。