gpt4 book ai didi

javascript - 范围更改时更改按钮颜色

转载 作者:行者123 更新时间:2023-11-30 13:55:16 25 4
gpt4 key购买 nike

$(document).ready(function(){
$("[type=range]").change(function(){
if(!$('#changetoyello').hasClass('yellow'))
$('#changetoyello').addClass('yellow');
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
</li>
<a href="javascript:void(0)" id="changetoyello" onclick="resetfilter()" class="btn btn-info" role="button">Link Button</a>
</body>
</html>

这是我的代码:每当我更改任何 slider 时都会添加两个范围 slider ,因此我的按钮颜色应变为黄色问题是我只想将按钮颜色更改为每当我改变范围时黄色

最佳答案

这可以通过引入以下 CSS 来实现:

.btn.yellow {

background:yellow;
border-color:yellow;

color:black; /* Make text readable on yellow background */
}

这是一个演示实际解决方案的工作代码片段:

$(document).ready(function() {
$("[type=range]").change(function() {
if (!$('#changetoyello').hasClass('yellow'))
$('#changetoyello').addClass('yellow');
});
});

/* Remove yellow theme when clicked */
$('#changetoyello').click(function() {
$(this).removeClass('yellow');
});
.btn.yellow {
background:yellow;
border-color:yellow;
color:black;
}
<!DOCTYPE html>
<html>

<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
<li>
Apply Credits1:
<input type="range" min="0" max="100" name="discount_credits1" id="discount_credits" />
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100" name="discount_credits2" id="discount_credits" />
</li>
<a href="javascript:void(0)" id="changetoyello" class="btn btn-info" role="button">Link Button</a>
</body>

</html>

更新

要在单击时从按钮中移除黄色,请将以下内容添加到您的脚本中:

$('#changetoyello').click(function() {

/* Remove yellow theme when clicked */
$(this).removeClass('yellow');
});

关于javascript - 范围更改时更改按钮颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57423335/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com