如何刪除除一個以外的所有切換？
[英]How to remove all toggle except for one?
問題描述
我創建了具有翻頁png的html頁面，我想做的事情是當我單擊（進行翻頁）所有png時，它必須是灰度的（我做了這一部分），然后如果我單擊了任何png，其他png必須是默認
如果您查看演示鏈接，您將了解。
我的密碼
$(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;
}
});
});
嘗試這個！
以上代碼的更緊湊版本。
$(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");
});
});
兩者都可以肯定地工作。
解決方案2
1 2016-02-12 13:39:21
我基本上做到了，所以他們都使用相同的.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');
});
});
解決方案3
1 已采納 2016-02-12 13:42:54
刪除*_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');
}
});
密碼筆
解決方案4
1 2016-02-12 13:43:32
嘗試這個：
$(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堂課應該足以達到您的目標。
如何實現對所有的添加/刪除類 <li> 除了最后一個？
[英]How to implement add/remove class to all the <li> except the last one?
如何從數組中刪除除 javascript 中第一個元素之外的所有元素
[英]How to remove all element from array except the first one in javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.