Question

我创建了一个小jQuery插件来为某些事件创建角色循环效果，就像对yugop.com的效果一样。我想将其事件触发循环的元素与元素分开但我无法弄清楚如何在不使用唯一ID的情况下执行此操作。我所拥有的最好的方法是让文本循环的元素作为触发循环的元素的子元素。并根据id选择它。

以下是demo

以下是插件的调用方式

$('.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上会触发插件，该插件会在调用插件时指定的id为“text”的元素中循环文本。

以下是我在插件中使用的jQuery选择器

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

任何帮助将不胜感激，谢谢！

Answer 1

您可以使用以下内容：

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

但实际上，在没有传递明确目标的情况下，您可以将其用作默认的后退位置。

Answer 2

您可以在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>

（顺便说一下：使用具有相同id的多个元素并不是一件好事，你应该在那里使用类。）

使jQuery Character Cycle Plugin不引人注目的最佳解决方案是什么？

2 个答案: