JQuery цикл перехода по клику - PullRequest
Новая
       0

JQuery цикл перехода по клику

1 голос
/ 12 августа 2010

Я пытаюсь сделать цикл таким образом, чтобы при нажатии на элемент списка он становился зеленым, если при повторном нажатии он становился красным, еще раз и переходил в исходное состояние, в списке есть некоторые элементы, уже есть или зеленые или красные классы. Пока я написал это, но это не работает: 

$(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"))
}); });

Спасибо за вашу помощь.

Ответы [ 9 ]

4 голосов
/ 12 августа 2010

Проблема в том, что вы не можете использовать .hasClass() на this, это должен быть объект jquery, например $(this).Вы действительно не можете упростить это намного больше, чем у вас только для 3 состояний, исправленная версия будет выглядеть так:, эффективно меняя их.

3 голосов
/ 15 августа 2012

Вот один, который я использую.В 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')
2 голосов
/ 12 августа 2010

Создайте переменную «курсора» (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);
});

Хорошая вещь в программировании - вы можете использовать его для описания того, как вы на самом деле думаете. Вы использовали слово «цикл» в своем первоначальном описании, поэтому попробуйте создать код, описывающий повторяющуюся последовательность, а не использовать условные тесты. Вы, вероятно, обнаружите, что будете использовать «если» все меньше и меньше, чем больше вы продвигаетесь как программист.

1 голос
/ 12 августа 2010

Хорошо, эта случайная стартовая позиция действительно раздражала меня, и всегда были новые методы 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>
1 голос
/ 12 августа 2010

Вы пробовали Переключить ?Оно должно держать вас внутри страны.

0 голосов
/ 05 января 2016

Базовая логика традиционного стиля - 

$(".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]);
        }
    });
});
0 голосов
/ 31 октября 2015

Эта функция jQuery, а не плагин, будет циклически проходить через любое количество классов, которые были установлены как csv классов в атрибуте data-classes элемента cycler.Два класса действуют как тумблер.Начните с класса, которого нет в списке, и начальное состояние не затронуто.

Выполните цикл с помощью $ (селектор) .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
0 голосов
/ 18 ноября 2010

Существует плагин jQuery, который делает именно это, называется cycClass ...

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

репозиторий jquery: plugins.jquery.com/project/cycleClass

Best

Keith

PS: вот документация:

Пример: $ ("# linky"). CycleClass (["foo", "bar", "jonez"]);

Функциональность: если linky имеет какой-либо из классов, перечисленных в массиве тогда все классы будут удалены, а класс после того, как будет добавлен самый дальний найденный класс (модуль).

Сценарий:

  • если "foo" найден, заменить на "bar"
  • если "jonez" найден, заменить на "foo"
  • если "bar" и "jonez" найдены, заменить оба слова на "foo"
  • если ничего не найдено, добавляется "foo" (первый элемент)
0 голосов
/ 12 августа 2010

Это именно тот образец, который вам нужен: http://api.jquery.com/toggle/ "Пример: нажмите, чтобы переключить подсветку на элементе списка" 

$('li').toggle(function() {
    $(this).addClass('green');
}, function() {
    $(this).toggleClass('green red');
}, function() {
    $(this).removeClass('red');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...