切換按鈕，字體真棒和jquery
[英]toggle button with font awesome and jquery
問題描述
我認為這很簡單，但我有點困難，讓這個工作。 我可以使用.show和.hide切換一次，但無法切換回來。
所有的幫助將不勝感激。
這是代碼：
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
$(document).ready(function(){
$('.middle').click(function(){
$('.inactive').show();
$('.active').hide();
})
.click(function(){
$('.inactive').hide();
$('.active').show();
});
});
我在這里也有一支筆： http ： //codepen.io/lucky500/pen/qdZPLe
8 個解決方案
解決方案1
4 已采納 2015-05-13 23:36:47
一種方法是使用toggle
$(document).ready(function(){
$('.middle').click(function() {
$('.inactive, .active').toggle();
});
});
解決方案2
3 2015-05-13 23:35:43
為什么不通過使用帶有.toggleClass()的單個元素來簡化這一點。
http://jsbin.com/ceyilucuya/1/edit?html,css,js,output
$('.toggler').on('click', function () {
$(this).toggleClass('fa-rotate-180 on');
});
解決方案3
1 2015-05-13 23:34:01
你的HTML的結構有點時髦，但是我發現你的問題很難修復。 我重復的以下代碼是一個臟修復，但它的工作原理。
http://codepen.io/anon/pen/MwyEdq
JS
$(document).ready(function(){
i = 0;
$(".fa-toggle-on").click(function() {
if ( i == 0) {
$('.inactive').hide();
$('.active').show();
i++;
}
else if ( i == 1) {
$('.inactive').show();
$('.active').hide();
i = 0;
}
});
});
HTML
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
CSS
.middle {
text-align: center;
margin: 0 auto;
padding: 2rem;
}
.active {
color: green;
}
解決方案4
1 2017-08-23 15:00:47
一般而言，它的工作方式如下：您可以將其用於一般用途。
<script> $(document).ready(function () { $('i').click(function () { $(this).toggleClass('fa-plus-square fa-minus-square'); }); }); </script>
解決方案5
0 2017-02-03 14:18:23
旋轉fontawesome圖標是一個不錯的主意，但瀏覽器可能會顯示垂直定位的一些變化，因為圖標相對於可見像素具有不同的透明邊距。
我結合了@ miguel-mota和@oka的解決方案。
只需要一個fontawesome標簽，類在.toggler類的on click函數中切換。 確保使用每個函數應用多個轉換。
JS
$('.toggler').on('click', function () {
$(".my-button").each(function(){
$(this).toggleClass('fa-toggle-off');
$(this).toggleClass('fa-toggle-on');
$(this).toggleClass('active');
})
});
CSS
.toggler {
text-align: center;
margin: 0 auto;
padding: 2rem;
cursor: pointer;
color: black;
}
.active {
color: green;
}
HTML
<div class="toggler">
<i class="fa fa-toggle-off fa-2x inactive my-button"></i>
</div>
解決方案6
0 2018-03-29 17:59:39
這個jQuery插件對我很有用： https ： //github.com/hurkanaras/Hurkan-Switch-Plugin
一個例子：
$('[data-toggle="hurkanSwitch"]').hurkanSwitch({
'width':'90px',
'offConfirm': function(r) { return confirm('Are you sure you want to disable this?'); },
'on': function(e) { toggle(e, 'enable'); },
'off': function(e) { toggle(e, 'disable'); },
'onColor': 'green',
'offColor': 'red',
'className': 'switch-toggle' //I changed the font size with this
});
解決方案7
0 2019-04-04 00:39:22
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
</head>
<body>
<i id='checkboxAbcToggle' class='far fa-square cursorIcon'></i> Show Abc
</body>
=================
$('#checkboxAbcToggle').click(function () {
// Toaster.top('toggleClass');
UiUx.setCheckbox('#checkboxAbcToggle');
});
let Key = {
uncheckedSquare: 'fa-square',
checkedSquare: 'fa-check-square',
}
let UiUx = {};
UiUx.setCheckbox = function (checkboxIcon_jqId) {
let checkboxIconElement = $(checkboxIcon_jqId);
let isChecked = checkboxIconElement.hasClass(Key.checkedSquare);
if (isChecked === true) {
checkboxIconElement.removeClass(Key.checkedSquare);
checkboxIconElement.addClass(Key.uncheckedSquare);
}
else {
checkboxIconElement.removeClass(Key.uncheckedSquare);
checkboxIconElement.addClass(Key.checkedSquare);
}
}
解決方案8
0 2019-07-04 15:10:09
CSS
.rotate{
transform:rotate(180deg);
color:black
}
jQuery的
$('.fa-toggle-on').on('click',function() {
$(this).toggleClass('rotate')
});
Jquery Accordion with Font Awesome Toggle
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.