Question

我正在尝试制作一个循环，这样如果你点击一个列表项就会变为绿色，如果再次点击它会变红，再一次变为原始状态，列表中会有一些项目已经有绿色或红色类。到目前为止，我已经写了这个，但它不起作用：

$(document).ready(function () {
$("li").click(function () {
    if (this.hasClass ("red")) {
        $(this).removeClass("red")
        }
    if (this.hasClass ("green")) {
        $(this).addClass("red").removeClass("green")
        }
    else ($(this).addClass("green"))
}); });

感谢您的帮助。

Answer 1

问题是你无法在this上使用.hasClass()，它需要是一个jquery对象，例如$(this)。你真的无法简化它比只有3个状态，固定版本看起来像这样：

$("li").click(function () {
  var $this = $(this);
  if ($this.hasClass ("red")) 
    $this.removeClass("red")
  if ($this.hasClass ("green")) {
    $this.toggleClass("red green");
  } else {
    $this.addClass("green")
  }
});

.toggleClass()只是切换两者的捷径，有效地交换它们。

Answer 2

这是我使用的。在JavaScript中：

$.fn.cycleClasses = function() {
  var classes, currentClass, nextClass, _this = this;
  classes = Array.prototype.slice.call(arguments);

  currentClass = $.grep(classes, function(klass) {
    return _this.hasClass(klass);
  }).pop();

  nextClass = classes[classes.indexOf(currentClass) + 1] || classes[0];

  this.removeClass(currentClass);
  return this.addClass(nextClass);
};

在CoffeeScript中：

$.fn.cycleClasses = (classes...) ->
  currentClass = $.grep classes, (klass) =>
    this.hasClass(klass)
  .pop()

  nextClass = classes[classes.indexOf(currentClass) + 1] || classes[0]

  this.removeClass(currentClass)
  this.addClass(nextClass)

用法：

$('.someElement').cycleClasses('a', 'b', 'c')

Answer 3

创建一个“光标”变量（classNum），用于跟踪位置，然后让光标移动到包含所需状态的数组中的每个位置。没有测试过这段代码，但这是基本的想法。

var classes = ["default", "red", "green"];
$("li").click(function () {
  var classNum = $(this).data("classNum") || 0;
  $(this).removeClass(classes[classNum]);
  classNum = (classNum + 1)  % classes.length;
  $(this).addClass(classes[classNum]);
  $(this).data("classNum", classNum);
});

编程的好处是你可以用它来描述你的实际思考方式。您在原始描述中使用了“loop”一词，因此尝试创建描述重复序列的代码，而不是使用条件测试。你可能会发现自己越来越少地使用“if”，你作为程序员的进步越来越少。

Answer 4

你试过Toggle吗？它应该在内部保持状态。

Answer 5

好的，这个随机的起始位置真让我讨厌，并且总有新的jQuery方法我之前没玩过多少。因此，这是N> 1状态的模块循环解决方案，包括没有初始类的默认状态：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var list = $("#list");

        //make default state _not_ a special case by adding a class to it
        $("li:not(.green,.red)", list).addClass("default"); 

        //declare cycle transition function
        var cycleClass = function(classFrom, classTo){
            list.delegate("li."+classFrom, "click", function(){
                $(this).toggleClass(classFrom + " " + classTo);
            });
        };

        //declare cycle sequence
        cycleClass("default", "green");
        cycleClass("green", "red");
        cycleClass("red", "default");
    });
</script>
<style type="text/css">
    .default {background-color: lightgray;}
    .green {background-color: green;}
    .red {background-color: red;}
</style>
</head>
<body>
<ul id='list'>
    <li>Start in default</li>
    <li>Another default</li>
    <li class='green'>Start in Green</li>
    <li class='red'>Start in Red</li>
    <li class='green'>Another Green</li>
    <li>Yes another default</li>
</ul>
</body>
</html>

Answer 6

确切地说是您需要的样本：http://api.jquery.com/toggle/“示例：单击以在列表项上切换突出显示”

$('li').toggle(function() {
    $(this).addClass('green');
}, function() {
    $(this).toggleClass('green red');
}, function() {
    $(this).removeClass('red');
});

Answer 7

有一个jQuery插件可以完成这个名为cycleClass ...

的插件

github：https://github.com/keithmgould/cycleClass

jquery插件repo：plugins.jquery.com/project/cycleClass

最佳，

基思

PS：这是文档：

示例： $（“＃linky”）。cycleClass（[“foo”，“bar”，“jonez”]）;

<强>功能如果linky具有数组中列出的任何类然后将删除所有类和类在找到最远的等级（模数）之后。

<强>方案：

如果找到“foo”，请替换为“bar”
如果找到“jonez”，请替换为“foo”
如果找到“bar”和“jonez”，则将其替换为“foo”
如果没有找到，“foo”（第一个元素）添加

Answer 8

这个jQuery函数，不是一个插件，将循环遍历任何数量的类，这些类在cycler元素的data-classes属性中被设置为类的csv。两个类的行为就像切换一样。从不在列表中的类开始，初始状态不受影响。

使用$（选择器）循环它.cycleClass（）。

我通过服务器端模板引擎运行，因此{{#objModel}}和{{/ objModel}}会删除，如果你没有。

适用于具有class和data- *属性的任何元素。下面的代码有一个循环按钮来更改代码块的类。但它可能只是在按钮上，并改变了自己的类。

我最初发布此帖子来回答toggle class主题/问题，然后找到了这个循环类主题。

在www.PluginExamples.com处查看正在使用的内容。

{{#objModel}}
    <style>
        #cycler.A code {outline:3px solid red;}
        #cycler.B code {outline:3px solid blue;}
        #cycler.C code {outline:3px dotted green;}
        #cycler.D code {outline:3px dotted red;}
        #cycler.E code {outline:3px dashed blue;}
        #cycler.F code {outline:3px dashed green;}
    </style>
    <button onclick="$('#cycler').cycleClass();">Cycle</button>
 <div id="cycler" data-classes=",A,B,C,D,E,F">
            <code 
                id="cycleClass"
>&lt;div id="cycler" data-classes=",A,B,C,D,E,F,"&gt;...&lt;/div&gt;

&lt;button onclick="$('#cycler').cycleClass();"&gt;Cycle&lt;/button&gt;

$( ".cycler" ).cycleClass();

$.fn.cycleClass = function(){
    if( !$(this).data("aClasses") ){
        var classes = $(this).attr("data-classes").split(",");
        $(this).data("aClasses", classes);
        $(this).data("classes", classes.join(" "));
        $(this).data("class", classes.length);
    }
    $(this).data("class",($(this).data("class")+1) % $(this).data("aClasses").length);
    $(this).removeClass($(this).data("classes"))
        .addClass( $(this).data("aClasses")[$(this).data("class")] );
    return $(this);
}
            </code>
</div>   
    <script>
           (function($){
                $.fn.cycleClass = function(){
                    if( !$(this).data("aClasses") ){
                        var classes = $(this).attr("data-classes").split(",");
                        $(this).data("aClasses", classes);
                        $(this).data("classes", classes.join(" "));
                        $(this).data("class", classes.length);
                    }
                    $(this).data("class",($(this).data("class")+1) % $(this).data("aClasses").length);
                    $(this).removeClass($(this).data("classes"))
                        .addClass( $(this).data("aClasses")[$(this).data("class")] );
                    return $(this);
                }
            });
    </script>    
{{/objModel}}


  [1]: http://www.pluginexamples.com

Answer 9

基本的传统风格逻辑 -

$(".toCycle").click(function(){
    var rotator = this;
    var cycle = ["bg-default", "bg-warning", "bg-success", "bg-danger"];

    var classList = $(this).attr("class").split(/\s+/);
    $.each(classList, function(index, item) {
        var i = cycle.indexOf(item);
        var n;
        if (i > -1) {
            $(rotator).removeClass(item);
            n = i+1;
            if (n == cycle.length) //control the overflow
                n = 0;
            $(rotator).addClass(cycle[n]);
        }
    });
});

JQuery点击类循环

9 个答案: