jQuery懸停多個ID從PHP生成DIV

我使用基於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的GET 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，或在div我用R參數指定。我遇到了代碼工作在頁面上的所有ID的麻煩。它們基於SQL數據生成。

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

有沒有辦法做到這一點使用LOOP功能？或從生成的div獲取ID？

感謝您提前提供的所有幫助。

來源

2016-12-09 Marcel Herič

是的有一種方法可以通過它們循環但它不會很簡單。如果可能的話，我會建議修改PHP，以便爲這些div添加一個特定的類並使用它輕鬆地遍歷它們。它會讓你的生活更輕鬆，並且你的代碼更少出錯。 –

我的div已經有類，當我懸停在ORDER類div上時，它應該顯示POSITION類div。他們看起來像這樣： https://postimg.org/image/ooqnfkx3n/ –

使用starts with選擇

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

文檔：Attribute Starts With Selector [name^=」value」]

來源

2016-12-09 08:35:26 philantrovert

它只顯示所有的div。我需要它在a1上顯示b1，在a3上顯示b2 ... –

在添加了這些動態'div'元素後，您需要使用此代碼。 – philantrovert

我需要指定第一個div的ID來顯示相應的ID 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 
}

來源

2016-12-09 08:44:34 Hmmm

我有類已經指定，有沒有辦法只是將邏輯添加到r變量？ –

「邏輯到r變量」是什麼意思？如果你有一些不錯的獨特id（不是a1），它不會傷害你的html頁面，那麼你可以用philantrovert的答案在下面，那會。除此之外，您可以將事件關聯到類，然後從中獲取id，r並執行您的操作。說得通？ – Hmmm

我需要的是在腳本中爲每個生成的div更改r變量。其他一切正常...如果我複製相同的腳本，只是改變r值（1,2,3,4,5 ...）它的作品。 –

jQuery懸停多個ID從PHP生成DIV

回答

相關問題