如何删除除一个以外的所有切换？
[英]How to remove all toggle except for one?
问题描述
I created html page which has got rollover png and thing that I want to do is when I clicked (make rollover) all png it has to be grayscale (I did it this part) and after that if I clicked any png other png must be default 
我创建了具有翻页png的html页面，我想做的事情是当我单击（进行翻页）所有png时，它必须是灰度的（我做了这一部分），然后如果我单击了任何png，其他png必须是默认
If you check demo link you gonna understand. 如果您查看演示链接，您将了解。
my codepen demo link 我的Codepen演示链接
and the link that I want to do (rating section) 和我想做的链接（评分部分）
My Codes 我的密码
$(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>
4 个解决方案
解决方案1
1 2016-02-12 13:33:59
$(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;
}
});
});
Try this! 尝试这个！
More compact version of above code. 以上代码的更紧凑版本。
$(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");
});
});
Both will work for sure. 两者都可以肯定地工作。
解决方案2
1 2016-02-12 13:39:21
I've fully duplicated it here 我已经在这里完全复制了
I basically made it so they all use the same .enabledclass, to simplify the code. 我基本上做到了，所以他们都使用相同的.enabledclass来简化代码。 I also then check if they are all ticked, and if so toggle them all when another is ticked (like the site does) 然后，我还要检查它们是否都被打勾，如果是，则在另一个被打勾时将它们都切换（就像该站点一样）
$(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');
});
});
解决方案3
1 已采纳 2016-02-12 13:42:54
Remove *_pasif class from all others elements if clicked element has the *_pasif class like following. 删除*_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');
});
Update 更新资料
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');
}
});
CODE PEN 密码笔
解决方案4
1 2016-02-12 13:43:32
Try this: 尝试这个：
$(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;
}
});
});
However this code is a bit messy, as you have to many unnecessary classes there. 但是，此代码有点混乱，因为那里必须有许多不必要的类。 2 classes should be enough to reach your goal. 2堂课应该足以达到您的目标。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.