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

How to create a jQuery listener to iterate through some markup

本文关键字：遍历 监听器 何创建 创建 一个 jQuery      更新时间：2023-09-26

我想在一个元素上创建一个简单的工具提示（星级），我希望能够在每个开始处悬停，并显示不同的消息。

我面临的问题是，星号标记的输出并没有给每个星号一个唯一的标识符，所以我必须迭代每个星号集合，并为每个星号应用一个监听器。

每个星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>

感谢

您可以将相同的事件侦听器绑定到每个元素，并在执行时检查文本（使用不同元素不同的$(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
});

为什么要迭代？你有一个适合你的明星的课程，所以一个电话就可以了：

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

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

权衡是使用事件委托，使用.on:的三参数版本

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

不过，这里的缺点是CPU效率——jQuery中的委托处理程序系统将为页面上的每一次鼠标移动调用。

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

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

您可以使用jQuery的:contains选择器通过元素的文本获取元素：

$(".ui-stars-star a:contains(1)")
$(".ui-stars-star a:contains(2)")
...so on
相关文章：