Question

我有两个带有隐藏输入的按钮，我想做的是让它们处于活动状态，当它们变为活动状态时我想要改变按钮的背景颜色并将类激活添加到按钮并更改隐藏的输入值从0到1，这是我到目前为止所尝试的：

$(".btn-default").click(function () {
      $(this).css('background-color', 'blue');
      $(this).toggleClass("active");

    });

input{
display: none;
}

.btn-default{
background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default">Button 1</button>
  <input type="text" class="form-control" id="input1" value="0">

<button type="button" class="btn btn-default">Button 2</button>
  <input type="text" class="form-control" id="input2" value="0">

Answer 1

您可以将其应用于活动类，而不是使用jquery来应用颜色。然后使用.next().val()更新兄弟输入的值。

$(".btn-default").click(function () {
   $(this).addClass("active").next('.form-control').val('1');
});

input{
  display: none;
}
.btn-default{
  background: red
}
.active {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default">Button 1</button>
<input type="text" class="form-control" id="input1" value="0">

<button type="button" class="btn btn-default">Button 2</button>
<input type="text" class="form-control" id="input2" value="0">

作为旁注，您可以使用<input type="hidden" value="0">而不是文本输入。然后你不必用css手动隐藏它。

Answer 2

如果您需要将活动类和输入值从0切换为1，您可以：

$(".btn-default").click(function () {
    $(this).toggleClass("active").next(':input').val(function(idx, val) {
        return (+val == 0) ? 1 : 0;
    });
    console.log($(this).next(':input').val());
});

input{
  display: none !important;
}

.btn-default{
  background-color: red
}
.active {
  background-color: blue !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-default">Button 1</button>
<input type="text" class="form-control" id="input1" value="0">

<button type="button" class="btn btn-default">Button 2</button>
<input type="text" class="form-control" id="input2" value="0">

单击按钮更改类激活和输入值

2 个答案: