Question

我认为这很简单，但我有点困难让这个工作。我可以使用.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

Answer 1

一种方法是使用toggle

$(document).ready(function(){
    $('.middle').click(function() {
        $('.inactive, .active').toggle();
  });
});

<强> http://codepen.io/miguelmota/pen/zGqPOX

Answer 2

为什么不使用.toggleClass()的单个元素来简化这一点。

http://jsbin.com/ceyilucuya/1/edit?html,css,js,output

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

Answer 3

你的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;
}

Answer 4

一般而言，它的工作原理如下：您可以在一般用途中使用它。

＆＃13;

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

＆＃13;

Answer 5

旋转fontawesome图标是一个不错的主意，但浏览器可能会显示垂直定位的一些变化，因为图标相对于可见像素具有不同的透明边距。

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

只需要一个fontawesome标记，类在.toggler类的on click函数中切换。确保使用每个函数应用多个转换。

JS

<div class="side">
  <div>
    <ul>
      <li>
        <table class="subscribed-channels" data-ng-model="subscribedChannels">
          <tr data-ng-repeat="channel in subscribedChannels" data-ng-click="enterChannel(channel.ChannelName)" data-ng-class="{active: isActive(channel.ChannelName)}">
            <td>channel</td>

            <td class="side-badges">...
            </td>
            <td>
              <data-button class="channel-control description">
                <img class="channel-control-icon" data-ng-src="css/img/glyphicons-info-sign.png" alt="info" />
                <div class="description-content">Description</div>
              </data-button>
            </td>
          </tr>
          <tr>

            <td>channel</td>

            <td class="side-badges">...
            </td>
            <td>
              <data-button class="channel-control description">
                <img class="channel-control-icon" data-ng-src="css/img/glyphicons-info-sign.png" alt="info" />
                <div class="description-content">Description</div>
              </data-button>
            </td>
          </tr>
          <tr>

            <td>channel</td>

            <td class="side-badges">...
            </td>
            <td>
              <data-button class="channel-control description">
                <img class="channel-control-icon" data-ng-src="css/img/glyphicons-info-sign.png" alt="info" />
                <div class="description-content">Description</div>
              </data-button>
            </td>
          </tr>
          <tr>

            <td>channel</td>

            <td class="side-badges">...
            </td>
            <td>
              <data-button class="channel-control description">
                <img class="channel-control-icon" data-ng-src="css/img/glyphicons-info-sign.png" alt="info" />
                <div class="description-content">Description</div>
              </data-button>
            </td>
          </tr>
          <tr>

            <td>channel</td>

            <td class="side-badges">...
            </td>
            <td>
              <data-button class="channel-control description">
                <img class="channel-control-icon" data-ng-src="css/img/glyphicons-info-sign.png" alt="info" />
                <div class="description-content">Description</div>
              </data-button>
            </td>
          </tr>
          <tr>
            <td>channel</td>

            <td class="side-badges">...
            </td>
            <td>
              <data-button class="channel-control description">
                <img class="channel-control-icon" data-ng-src="css/img/glyphicons-info-sign.png" alt="info" />
                <div class="description-content">Description</div>
              </data-button>
            </td>
          </tr>
        </table>
      </li>
    </ul>
  </div>
</div>

CSS

 $('.toggler').on('click', function () {
          $(".my-button").each(function(){
            $(this).toggleClass('fa-toggle-off');
            $(this).toggleClass('fa-toggle-on');
            $(this).toggleClass('active');
          })
      });

HTML

.toggler {
  text-align: center;
  margin: 0 auto;
  padding: 2rem;
  cursor: pointer;
  color: black;
}
.active {
    color: green;
}

Answer 6

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

Answer 7

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

}

Answer 8

css

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

jquery

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

切换按钮，字体真棒和jquery

8 个答案: