logo标签列表

使用Font Awesome和jQuery创建切换按钮

javascriptjquery
3

我觉得这应该很简单，但是我在让它工作方面遇到了一些困难。我能够使用.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
1
嘿，Mohamed...我确实尝试了那些方法，但它们并没有给我想要的结果。无论如何还是谢谢。 - Lucky500
8个回答
4
3
1

Generally and simply it works like this: You can use this in general purposes. 

<script>
            $(document).ready(function () {
                $('i').click(function () {
                    $(this).toggleClass('fa-plus-square fa-minus-square');
                });
            });
</script>

1
你的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;
}
1
i 可以是布尔值吗？ - George Simms
0

这个 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
});
0
<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);
    }

}
0

CSS

.rotate{
     transform:rotate(180deg);
      color:black
    }

jQuery

$('.fa-toggle-on').on('click',function() {
        $(this).toggleClass('rotate')
      });
0

旋转fontawesome图标是一个不错的想法，但是由于该图标与可见像素具有不同的透明边距，因此浏览器可能会在垂直定位上显示一些变化。

我结合了@miguel-mota和@oka的解决方案。

只需要一个fontawesome标签，在类.toggler的单击函数中切换类。确保使用each函数应用多个转换。

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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接