Как лучше всего сделать плагин jQuery Character Cycle Plugin ненавязчивым? - PullRequest
Новая
       7

Как лучше всего сделать плагин jQuery Character Cycle Plugin ненавязчивым?

2 голосов
/ 10 октября 2011

Я создал небольшой плагин jQuery для создания эффекта зацикливания персонажей на каком-либо событии, очень похожего на эффект yugop.com . Я хотел бы отделить элемент, событие которого запускает зацикливание от элемента, но я не могу понять, как это сделать без использования уникальных идентификаторов. Лучшее, что я имею право - это иметь элемент, текст которого циклически повторяется, как дочерний элемент элемента, запускающего циклический цикл. и выберите его на основе идентификатора.

Вот демоверсия

Вот как плагин называется 

$('.c').mouseenter(function(){
    if($(this).hasClass('cycling')==false){ 
                $(this).charcycle({'target':'#text'});  
    }
});

Вот HTML-разметка для элементов, которыми манипулируют 

<div class="c">
   <a href="#" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a>  
</div>

при наведении курсора на div запускается плагин, который циклически повторяет текст в элементе с идентификатором "text", который указывается при вызове плагина.

Вот селекторы jQuery, которые я использую в плагине 

settings.targetElement=$(this).find(settings.target);
settings.quoteStr=settings.targetElement.text();

Любая помощь будет оценена, спасибо!

Ответы [ 2 ]

0 голосов
/ 21 ноября 2011

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

$('.c').mouseenter(function(){
    if (!$(this).hasClass('cycling'))
    { 
        var prefix = 'ctarget-';
        var classes = $(this).attr('class').split(' ');
        // enumerate all the classes of this element
        for (var i in classes)
        {
            // if a class starts with a known prefix (see above)
            if (classes[i].substr(0, prefix.length) == prefix)
            {
                // then extract target class from it and use that
                $(this).charcycle({target: '.'+classes[i].substr(prefix.length)});
            }
        }
    }
});

HTML-код будет выглядеть так: 

<div class="c ctarget-text1">trigger</div>
<a href="#" class="text1">Lorem ipsum dolor sit amet</a>

(Кстати: не очень хорошо использовать несколько элементов с одинаковым идентификатором, вывероятно, вместо этого должны были использовать классы.)

0 голосов
/ 10 октября 2011

Вы могли бы использовать что-то вроде: 

$(this).charcycle({'target': $(this).contents(":first-child") });

Но, вероятно, более практично, вы бы использовали это в качестве запасной позиции по умолчанию, в случае отсутствия явной цели.

...