jQuery从php生成的DIV悬停多个ID

Question

我在使用 jQuery 脚本时遇到了一些问题。

我根据来自 SQL 的数据使用 PHP 生成了我的 div。

echo "<div class='order' id='a$i' runat='server' draggable='true' >";

鼠标悬停时，它会显示一个同样由 PHP 和 SQL 生成的不同 div。

echo "<div class='position' id='b$i2' runat='server' draggable='true'>";

然后我有一个 jQuery 脚本，它具有第二个 div 的悬停功能。 每个 div 都从 php 获取它的 ID。 Menu div 得到 a1, a2, a3....，hover div 得到 b1, b2, b3....

$(function() {

              var moveLeft = 20;
              var moveDown = 10;
              var r = 1;


              $('div#a'+r).hover(function(e) {


                $('div#b'+r).show();

              }, function() {
                $('div#b'+r).hide();

              });

              $('div#a'+r).mousemove(function(e) {
                $("div#b"+r).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);

              });

            });

代码适用于第一个 div，或者我用 r 变量指定的 div。 我在处理页面上所有 ID 的代码时遇到问题。它们是根据 SQL 数据生成的。

https://postimg.org/image/ooqnfkx3n/

有没有办法使用 LOOP 函数来做到这一点？还是从生成的 div 中获取 ID？

提前感谢所有帮助。

Answer 1

使用starts with选择器

$("div[id^='a']").hover(function(event) {
    //Do your thing
}

文档：Attribute Starts With Selector [name^=”value”]

Answer 2

如何在类而不是 div 上添加悬停事件，但基于 div 添加逻辑。

$(".theclassofA").hover(function(event) {
var id = $(this).attr('id');
var temp_rel = //then get the integer 'r' from this id
var temp_id = "b"+temp_rel;
//use this temp_id to show/hide your elements
}