按钮点击更改类的活动和输入值

我有两个隐藏的输入按钮，我想要做的就是让他们活跃onclick，当他们变得活跃，我想按钮的背景色改变并添加类主动到按钮，从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">

来源

2017-05-31 stephjhonny

而是使用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手动隐藏它。

来源

2017-05-31 20:35:37

谢谢你，但它的好，保持活跃的背景颜色jQuery的，因为我我的代码中有其他活动类，我不希望它们混淆起来，好吗？ – stephjhonny

是的，我只是根据最初的信息提出建议。你可以在开头链接原始的'.css（）'，它的工作原理是一样的。 –

如果你需要切换活动类和输入值从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">

来源

2017-05-31 20:47:22 gaetanoM

按钮点击更改类的活动和输入值

回答

相关问题