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

[{"ID":1,"EmpName":"a","Age":1}, {"ID":2,"EmpName":"b","Age":2}, {"ID":3,"EmpName":"c","Age":3}, {"ID":4,"EmpName":"d","Age":4}, {"ID":5,"EmpName":"e","Age":5}, {"ID":6,"EmpName":"f","Age":6}, {"ID":7,"EmpName":"g","Age":7}, {"ID":8,"EmpName":"h","Age":8}, {"ID":9,"EmpName":"i","Age":9}, {"ID":10,"EmpName":"j","Age":10}]在要更改颜色的输入上使用此方法。您可以通过.css('background-color','blue')

这样的名称访问输入

$('input[name="txtres"]')

function sumValues(){
  $('input[name="txtres"]').css('background-color','blue')
}

Answer 2

您可以向按钮添加.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类的输入元素都可以更改颜色。

Answer 3

使用var array = []; array['a'] = ['1','2','3']; array['b'] = ['2','3']; array['c'] = ['5','6','8','9']; array.sort(function(a, b) { return a.length < b.length ? -1 : (a.length > b.length ? 1 : 0); }); console.log(array);来更改按钮的bgcolor

css()

function sumValues(e){
$('input[name=txtres]').css('backgroundColor','red')
}

Answer 4

那就是我要做的

$('btn-danger').css("background-color", "blue");

$(document).ready(function(){
  $('.btn-danger').on( "click", function() {
    $('input[type="text"]').css("background-color", "blue");
  });
});

<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()">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在这里，您甚至可以听一下按钮上的点击，并在单击后更改输入文本的背景颜色

检查fiddle

Answer 5

您还可以使用所需的css class制作一个background-color，然后在单击class时添加该button进行输入。这只是另一种方式，你可以这样做：

sumValues = function(){
  $('input[name="txtres"]').addClass( "colored-background" );
}

.colored-background {
  background: lightgreen;
}

<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()">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

单击更改颜色输入字段

5 个答案: