切换按钮，字体真棒和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.