我创建了html页面，其中有翻转png和我想要做的事情是当我点击（制作翻转）所有png它必须是灰度（我做了这部分）然后如果我点击任何png其他png必须是默认的
如果你查看演示链接，你就会理解。
and the link that I want to do (rating section)
我的代码
$(document).ready(function(){
$(".form-elements input[type='button']").on("click", function(e) {
var el = $(this).attr("name");
switch(el){
case 'd1': $(this).toggleClass('d1_pasif'); break;
case 'd2': $(this).toggleClass('d2_pasif'); break;
case 'd3': $(this).toggleClass('d3_pasif'); break;
case 'd4': $(this).toggleClass('d4_pasif'); break;
case 'd5': $(this).toggleClass('d5_pasif'); break;
}
});
});.d-groups input[type="button"]{
cursor:pointer;
border: 0;
display: inline-block;
height: 32px;
width: 32px; padding: 0;
margin: 0;
}
.d1 {
background: url(https://anitur.streamprovider.net/images/otel-filtre/d1.png);
}
.d1_pasif {
background: url(https://anitur.streamprovider.net/images/otel-filtre/d1_pasif.png);
}
.d2 {
background: url(https://anitur.streamprovider.net/images/otel-filtre/d2.png);
}
.d2_pasif {
background: url(https://anitur.streamprovider.net/images/otel-filtre/d2_pasif.png);
}
.d3 {
background: url(https://anitur.streamprovider.net/images/otel-filtre/d3.png);
}
.d3_pasif {
background: url(https://anitur.streamprovider.net/images/otel-filtre/d3_pasif.png);
}
.d4 {
background: url(https://anitur.streamprovider.net/images/otel-filtre/d4.png);
}
.d4_pasif {
background: url(https://anitur.streamprovider.net/images/otel-filtre/d4_pasif.png);
}
.d5 {
background: url(https://anitur.streamprovider.net/images/otel-filtre/d5.png);
}
.d5_pasif {
background: url(https://anitur.streamprovider.net/images/otel-filtre/d5_pasif.png);
}<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="//anitur.streamprovider.net/js/jquery-1.8.2.min.js?v=1.2" ></script>
<div class="form-elements d-groups" style="padding:4px 0;padding-left:5px;margin:0 auto;display:block;">
<input type="button" name="d5" class="d5" />
<input type="button" name="d4" class="d4" />
<input type="button" name="d3" class="d3" />
<input type="button" name="d2" class="d2" />
<input type="button" name="d1" class="d1" />
</div>
</body>
</html>
答案 0 :(得分：1)
$(document).ready(function(){
$(".form-elements input[type='button']").on("click", function(e) {
var el = $(this).attr("name");
$(".form-elements input[type='button']").removeClass(); // Add this
switch(el){
case 'd1': $(this).toggleClass('d1_pasif'); break;
case 'd2': $(this).toggleClass('d2_pasif'); break;
case 'd3': $(this).toggleClass('d3_pasif'); break;
case 'd4': $(this).toggleClass('d4_pasif'); break;
case 'd5': $(this).toggleClass('d5_pasif'); break;
}
});
});
试试这个！
上述代码的更紧凑版本。
$(document).ready(function(){
$(".form-elements input[type='button']").on("click", function(e) {
var el = $(this).attr("name");
$(".form-elements input[type='button']").removeClass(); // Add this
$(this).addClass(el+"_pasif");
});
});
两者都可以肯定。
答案 1 :(得分：1)
我完全复制了它here
我基本上是这样做的，所以他们都使用相同的.enabledclass来简化代码。然后我还检查它们是否都被勾选，如果是这样，当另一个被勾选时（例如网站），它们都会切换它们
$(document).ready(function() {
$(".form-elements input[type='button']").toggleClass('enabled');
$(".form-elements input[type='button']").on("click", function(e) {
if ($(this).parent().children(':not(.enabled)').length == 0) {
$(".form-elements input[type='button']").toggleClass('enabled');
}
$(this).toggleClass('enabled');
});
});
答案 2 :(得分：1)
如果点击的元素具有如下所示的*_pasif类，则从所有其他元素中删除*_pasif类。
$(".form-elements input[type='button']").on("click", function (e) {
var el = $(this).attr("name");
if (!$(this).hasClass(el + '_pasif')) {
$(".form-elements input[type='button']").not(this).each(function () {
$(this).removeClass($(this).attr("name") + '_pasif');
})
}
$(this).toggleClass(el + '_pasif');
});
<强>更新
var buttons = $(".form-elements input[type='button']");
buttons.on("click", function (e) {
var el = $(this).attr("name");
var length = buttons.length,
count = 0;
buttons.each(function () {
if ($(this).hasClass(this.name + '_pasif'))
count++;
});
if (length == count) {
buttons.not(this).each(function () {
$(this).removeClass(this.name + '_pasif')
});
} else {
$(this).toggleClass(el + '_pasif');
}
});
答案 3 :(得分：1)
试试这个：
$(document).ready(function(){
$(".form-elements input[type='button']").on("click", function(e) {
var el = $(this).attr("name");
if (!$('.pasif').length)
{
$('.d1').toggleClass('d1_pasif');
$('.d2').toggleClass('d2_pasif');
$('.d3').toggleClass('d3_pasif');
$('.d4').toggleClass('d4_pasif');
$('.d5').toggleClass('d5_pasif');
}
$(this).toggleClass('pasif');
switch(el){
case 'd1': $(this).toggleClass('d1_pasif'); break;
case 'd2': $(this).toggleClass('d2_pasif'); break;
case 'd3': $(this).toggleClass('d3_pasif'); break;
case 'd4': $(this).toggleClass('d4_pasif'); break;
case 'd5': $(this).toggleClass('d5_pasif'); break;
}
});
});
然而，这段代码有点乱，因为那里你需要很多不必要的类。 2个课程应该足以达到你的目标。