IT技术 - jQuery：在 3 个类之间切换（最初） - 吾爱随笔录

jQuery：在 3 个类之间切换（最初）

IT技术 javascript jquery

2021-02-19 12:20:22

我在这里看到了几篇关于 SO 的帖子，但它们在功能和结构上过于具体，我正在寻找的是我或任何人都可以在任何地方使用的更通用的东西。

我所需要的只是有一个按钮，单击该按钮可以在3 个类之间循环。但是，如果出现必须循环遍历 4、5 个或更多类的情况，则可以轻松扩展脚本。

到目前为止，我能够在两个类之间“循环”，这基本上比骑自行车更“切换”，因此我有：

HTML：

<a href="#" class="toggle">Toggle classes</a>
<div class="class1">...</div>

jQuery：

$('.toggle').click(function () {
  $('div').toggleClass('class1 class2');
});

这是一个简单的小提琴。

现在，您会（好吧，我）认为向该方法添加第三个类会起作用，但它不会：

$('div').toggleClass('class1 class2 class3');

发生的事情是切换开始发生在class1和之间class3。

所以这就是我最初遇到的问题：如何让 Toggle 按钮按顺序循环通过3 个类？

然后：如果有人需要骑自行车上 4 节、5 节或更多课怎么办？

6个回答

你可以这样做：

$('.toggle').click(function () {
  var classes = ['class1','class2','class3'];
  $('div').each(function(){
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});

示范

@Chuck 你说得对，这与在这些元素上使用其他类不兼容。现在，在 4 年多之后，借助新工具，我将使用 classList 轻松添加和删除类。

2021-04-22 12:20:22

但是这个解决方案不会覆盖任何其他不应被此逻辑触及的类吗？

2021-04-23 12:20:22

与课程完美搭配！我有一些类似的情况，我应该在数据属性值之间切换（data-align=left|center|right）。你也有一个很好的解决方案;)？

2021-05-12 12:20:22

这正是我想要完成的，而且它也很容易扩展。巨大的加上添加演示。感谢一百万dystroy。

2021-05-15 12:20:22

绝对更喜欢你的方式，更简洁。

2021-05-17 12:20:22

这是另一种方法：

if ($(this).hasClass('one')) {
    $(this).removeClass('one').addClass('two');
} else if ($(this).hasClass('two')) {
    $(this).removeClass('two').addClass('three');
} else if ($(this).hasClass('three')) {
    $(this).removeClass('three').addClass('one');
}

虽然这不像主要答案那样可扩展，但对于 jquery 新手来说，我很欣赏它的简单性和可理解性。

2021-04-24 12:20:22

var classes = ['class1', 'class2', 'class3'],
    currentClass = 0;

$('.toggle').click(function () {

    $('div').removeClass(classes[currentClass]);

    if (currentClass + 1 < classes.length)
    {
        currentClass += 1;
    }
    else
    {
        currentClass = 0;
    }

    $('div').addClass(classes[currentClass]);

});

这样的事情应该可以正常工作:)

Tinker IO 链接 - https://tinker.io/1048b

没问题:) 很高兴你接受了dystroy 的解决方案，它更有效率。

2021-04-22 12:20:22

啊! 不错，效果很好。给你一个upvote的人，再次感谢。

2021-04-25 12:20:22

Toddish，我试过你的代码，但没有用。谢谢你的时间。

2021-05-02 12:20:22

我认为错误是将类设置为currentClass而不是classes[currentClass]

2021-05-18 12:20:22

这对我有用，我可以随心所欲地堆叠，然后轻松环绕。

switch($('div.sel_object table').attr('class'))
    {
    case "A":   $('div.sel_object table').toggleClass('A B'); break;
    case "B":   $('div.sel_object table').toggleClass('B C'); break;
    case "C":   $('div.sel_object table').toggleClass('C D'); break;
    case "D":   $('div.sel_object table').toggleClass('D A'); break;                
    }

轻松鼓励共享更多功能的功能，其中包含未定义数量的项目和一个循环。

2021-04-21 12:20:22

我将user3353523 的答案转换为 jQuery 插件。

(function() {
  $.fn.rotateClass = function(cls1, cls2, cls3) {
    if ($(this).hasClass(cls1)) {
      return $(this).removeClass(cls1).addClass(cls2);
    } else if ($(this).hasClass(cls2)) {
      return $(this).removeClass(cls2).addClass(cls3);
    } else if ($(this).hasClass(cls3)) {
      return $(this).removeClass(cls3).addClass(cls1);
    } else {
      return $(this).toggleClass(cls1); // Default case.
    }
  }
})(jQuery);

$('#click-me').on('click', function(e) {
  $(this).rotateClass('cls-1', 'cls-2', 'cls-3');
});

#click-me {
  width: 5em;
  height: 5em;
  line-height: 5em;
  text-align: center;
  border: thin solid #777;
  margin: calc(49vh - 2.4em) auto;
  cursor: pointer;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cls-1 { background: #FFAAAA; }
.cls-2 { background: #AAFFAA; }
.cls-3 { background: #AAAAFF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click-me" class="unselectable">Click Me!</div>

动态方法

(function() {
  $.fn.rotateClass = function() {
    let $this = this,
        clsList = arguments.length > 1 ? [].slice.call(arguments) : arguments[0];
    if (clsList.length === 0) {
      return $this;
    }
    if (typeof clsList === 'string') {
      clsList = clsList.indexOf(' ') > -1 ? clsList.split(/\s+/) : [ clsList ];
    }
    if (clsList.length > 1) {
      for (let idx = 0; idx < clsList.length; idx++) {
        if ($this.hasClass(clsList[idx])) {
          let nextIdx = (idx + 1) % clsList.length,
              nextCls = clsList.splice(nextIdx, 1);
          return $this.removeClass(clsList.join(' ')).addClass(nextCls[0]);
        }
      }
    }
    return $this.toggleClass(clsList[0]);
  }
})(jQuery);

$('#click-me').on('click', function(e) {
  $(this).rotateClass('cls-1', 'cls-2', 'cls-3');     // Parameters
  //$(this).rotateClass(['cls-1', 'cls-2', 'cls-3']); // Array
  //$(this).rotateClass('cls-1 cls-2 cls-3');         // String
});

#click-me {
  width: 5em;
  height: 5em;
  line-height: 5em;
  text-align: center;
  border: thin solid #777;
  margin: calc(49vh - 2.4em) auto;
  cursor: pointer;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cls-1 { background: #FFAAAA; }
.cls-2 { background: #AAFFAA; }
.cls-3 { background: #AAAAFF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click-me" class="unselectable">Click Me!</div>

谢谢Polywhirl 先生。如果你有超过 3 个class怎么办？在这方面，所选答案具有相当的可扩展性。此外，例如单击div链接而不是链接感觉很奇怪：p。感谢您的插件。

2021-04-23 12:20:22

@RicardoZea 好吧，我只是将逻辑转换为插件。我在下面创建了一个动态的。;)

2021-05-16 12:20:22

其它你可能感兴趣的问题

上一篇设置一个变量等于另一个变量下一篇无法使用数据绑定设置过滤器值？