1. 首頁
  2. 問答
  3. toggleClass工程，我知道那一定是作品永遠只有一次

toggleClass工程，我知道那一定是作品永遠只有一次

2016-02-09 23 views
4

我toggleClass功能僅適用於只是一次 - 旋轉和我說，如果else條件我的jQuery代碼得到的類名toggleClass工程，我知道那一定是作品永遠只有一次

我的HTML結構;

<div class="form-elements"> 
<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>

CSS文件

.d1 { 

    background: url(https://anitur.streamprovider.net/images/otel-filtre/d1.png); 
    border: 0; 
display: inline-block; 
    height: 32px; 
    width: 32px; padding: 0; 
    margin: 0; 
} 
.d1_pasif { 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d1_pasif.png); 
    border: 0; 
    display: inline-block; 
    height: 32px; 
    width: 32px; padding: 0; 
    margin: 0; 
} 
.d2 { 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d2.png); 
    border: 0; 
    display: inline-block; 
    height: 32px; 
    width: 32px; padding: 0; 
    margin: 0; 
} 
.d2_pasif { background: url(https://anitur.streamprovider.net/images/otel-filtre/d2_pasif.png); 

    border: 0; 
    display: inline-block; 
    height: 32px; 
    width: 32px; padding: 0; 
    margin: 0; 
} 
.d3 { 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d3.png); 
    border: 0; 
    display: inline-block; 
    height: 32px; 
    width: 32px; padding: 0; 
    margin: 0; 
} 
.d3_pasif { 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d3_pasif.png); 
    border: 0; 
    display: inline-block; 
    height: 32px; 
    width: 32px; padding: 0; 
    margin: 0; 
} 
.d4 { 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d4.png); 
    border: 0; 
display: inline-block; 
    height: 32px; 
    width: 32px; padding: 0; 
    margin: 0; 
} 
.d4_pasif { 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d4_pasif.png); 
    border: 0; 
    display: inline-block; 
    height: 32px; 
    width: 32px; 
} 
.d5 { 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d5.png); 
    border: 0; 
    display: inline-block; 
    height: 32px; 
    width: 32px; 
} 
.d5_pasif { 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d5_pasif.png); 
    border: 0; 
    display: inline-block; 
    height: 32px; 
    width: 32px; 
}

，這是我的js文件

$(".form-elements input[type='button']").on("click", function() { 

    var el = $(this).attr("class"); 
    if($(this).hasClass("d1")){ 
    $(".d1").toggleClass('d1 d1_pasif'); 

}else if($(this).hasClass("d2")){ 

$(".d2").toggleClass('d2 d2_pasif'); 

}else if($(this).hasClass("d3")){ 

    $(".d3").toggleClass('d3 d3_pasif'); 

}else if($(this).hasClass("d4")){ 

    $(".d4").toggleClass('d4 d4_pasif'); 

} 
    else if($(this).hasClass("d5")){ 

    $(".d5").toggleClass('d5 d5_pasif'); 

    } 
    return false;

}）;

來源

2016-02-09 ani_css

回答

2

有一個更簡單的方法來做到這一點，添加類的，你只能改變什麼應該改變，並非所有的風格

.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); 
    .... 
}

，而只是做

$(".form-elements input[type='button']").on("click", function() { 
    $(this).toggleClass('pasif'); 
});

FIDDLE

來源

2016-02-09 08:03:51 adeneo

+0

它的工作非常好，但也有一些是我的理解，這是不行的我的網頁，但在演示頁的作品完美 [我的演示鏈接]（http://www.anitur.com.tr/deneme-otel-liste） –

0

嘗試這樣的事：

$(".form-elements input[type='button']").on("click", function() { 
    $(this).toggleClass($(this).attr('name')+'_pasif'); 

});

來源

2016-02-09 08:03:17 madalinivascu

+0

我嘗試，但不幸的是這不是工作太 –

+0

更新我的回答 – madalinivascu

0

試試這個

$(".form-elements input[type='button']").on("click", function() { 

     var el = $(this).attr("name"); 
     if (el == "d1") { 
      $(this).toggleClass('d1_pasif'); 

     } else if (el == "d2") { 

      $(this).toggleClass('d2_pasif'); 

     } else if (el == "d3") { 

      $(this).toggleClass('d3_pasif'); 

     } else if (el == "d4") { 

      $(this).toggleClass('d4_pasif'); 

     } else if (el == "d5") { 

      $(this).toggleClass('d5_pasif'); 

     } 
     return false; 
    });

由於它的工作第一次因爲類D1，D2等當前DOM加載時，但一旦你使用ToggleClass D1，D2從button.So jQuery選擇刪除將無法正常工作，當你點擊第二次。

來源

2016-02-09 08:06:15 shu

+0

因爲它第一次工作，因爲類d1，d2等存在當dom被加載，但一旦你使用ToggleClass d1，d2被從按鈕中刪除。因此，Jquery選擇器不會再次點擊。 – shu

0

關於這個？

$(".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; 
 
     } 
 
});
.d1 { 
 

 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d1.png); 
 
    border: 0; 
 
display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d1_pasif { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d1_pasif.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d2 { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d2.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d2_pasif { background: url(https://anitur.streamprovider.net/images/otel-filtre/d2_pasif.png); 
 

 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d3 { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d3.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d3_pasif { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d3_pasif.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d4 { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d4.png); 
 
    border: 0; 
 
display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d4_pasif { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d4_pasif.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; 
 
} 
 
.d5 { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d5.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; 
 
} 
 
.d5_pasif { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d5_pasif.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-elements"> 
 
<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>

裁判：.toggleClass() JQuery

來源

2016-02-09 08:24:28

0

你需要切換隻是pasif類不d1 d1_pasif - 因爲d1從默認的存在，當你撥動它第一次真正刪除它，只是插入d1_pasif =>所以它不能工作

$(".form-elements input[type='button']").on("click", function() { 
 

 
    var el = $(this).attr("class"); 
 
    if($(this).hasClass("d1")){ 
 
    $(".d1").toggleClass('d1_pasif'); 
 

 
}else if($(this).hasClass("d2")){ 
 

 
$(".d2").toggleClass('d2_pasif'); 
 

 
}else if($(this).hasClass("d3")){ 
 

 
    $(".d3").toggleClass('d3_pasif'); 
 

 
}else if($(this).hasClass("d4")){ 
 

 
    $(".d4").toggleClass('d4_pasif'); 
 

 
} 
 
    else if($(this).hasClass("d5")){ 
 

 
    $(".d5").toggleClass('d5_pasif'); 
 

 
    } 
 
    return false; 
 
});
.d1 { 
 

 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d1.png); 
 
    border: 0; 
 
display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d1_pasif { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d1_pasif.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d2 { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d2.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d2_pasif { background: url(https://anitur.streamprovider.net/images/otel-filtre/d2_pasif.png); 
 

 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d3 { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d3.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d3_pasif { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d3_pasif.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d4 { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d4.png); 
 
    border: 0; 
 
display: inline-block; 
 
    height: 32px; 
 
    width: 32px; padding: 0; 
 
    margin: 0; 
 
} 
 
.d4_pasif { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d4_pasif.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; 
 
} 
 
.d5 { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d5.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; 
 
} 
 
.d5_pasif { 
 
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d5_pasif.png); 
 
    border: 0; 
 
    display: inline-block; 
 
    height: 32px; 
 
    width: 32px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-elements"> 
 
<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>

來源

2016-02-09 08:31:33 sTx

相關問題

 相關問題