Question

我在使用jQuery脚本时遇到了一些麻烦。

我根据SQL中的数据使用PHP生成我的div。

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

在鼠标悬停时，它显示了一个不同的div，它也是从PHP和SQL生成的。

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

然后我有一个jQuery脚本，它具有第二个div的悬停功能。每个div都从php获取它的ID。菜单div获得a1，a2，a3 ....并悬停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
}

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

2 个答案: