如何创建一个jQuery侦听器来遍历一些标记

我正在寻找创建一个简单的工具提示元素（星级评分），我希望能够悬停在每个开始和不同的消息出现。如何创建一个jQuery侦听器来遍历一些标记

我面对的问题是星标的输出不给每个星星一个唯一的标识符，所以我必须迭代每个星星的集合，并为每个星星应用一个听众。

每个星1-5将具有相同的消息，例如，星1 =消息1，星2 =消息2等

如果有人可以帮助，我想一些帮助了解如何创建监听器和HTML和消息应用到特定的明星，我想要做的这与jQuery。

这里是星标记输出

<div class="stars"> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">1</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">2</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">3</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">4</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">5</a> 
    </div> 

    <input type="hidden" value="5" name="rate_overall" disabled=""/> 
</div>

感谢

来源

2012-03-14 zizther

您可以在同一事件监听器绑定到每一个元素，当它的（使用$(this)这对于不同的元素是不同的）执行检查的文本：

$(".ui-stars-star").mouseover(function() { 
    var text = $(this).find("a").text(); // e.g. "1" or "2" 

    // now use `text` to fetch the correct message and show it 
});

来源

2012-03-14 16:46:44 pimvdb

谢谢，只是让我明白了，怎么会变成这样查找明星是在展现特殊信息？ – zizther 2012-03-15 17:34:23

@zizther：jQuery基本上是以这样一种方式创建的，这个'this'是指派发事件的元素。所以，悬停另一个元素会产生不同的'$（this）'，因此也会产生不同的'$（this）.text（）'。 – pimvdb 2012-03-15 17:35:54

为什么迭代？你有你的明星一类这样一个电话将工作：

$('.ui-stars-star') 
    .on('mouseenter', function() { 
    ... 
    }) 
    .on('mouseleave', function() { 
    })

然而，这是特别有效，因为它注册在其上有这个类的每一个元素上的处理程序。这就是说，这也是你当前的代码所能做的。

，这种交易是使用事件委托，采用.on三个参数版本：

$('.ui-stars-star', document, function() { ... });

这里的缺点，虽然是CPU效率 - jQuery中委派处理系统将要求每一个鼠标移动在页面上。

来源

2012-03-14 16:50:19 Alnitak

谢谢。它将如何知道显示特定消息的明星是什么，例如，将鼠标悬停在明星1上应显示消息1，将鼠标悬停在明星2上显示消息2，等等。 – zizther 2012-03-15 17:32:57

@zizther'$（this）.index（）'会在当前列表中为您提供明星的位置（基于零）。 – Alnitak 2012-03-15 20:14:45

您可以使用index()函数。即：

$('.ui-stars-star').mouseenter(function() { 
    switch ($(this).index()) { .. 
}

来源

2012-03-14 16:59:01

谢谢，就这样我明白，这将如何找到明星是什么来显示特定的消息？ – zizther 2012-03-15 17:34:55

你可以使用jQuery的:contains选择抓住它的文本元素：

$(".ui-stars-star a:contains(1)") 
$(".ui-stars-star a:contains(2)") 
...so on

来源

2012-03-14 17:08:40

谢谢，这看起来很有用 – zizther 2012-03-15 17:34:48

如何创建一个jQuery侦听器来遍历一些标记

回答

相关问题