如何在hQuery標籤中的onMouseOver時在jQuery中分配動態元素ID？

Question

我有3個超鏈接和DIV隨機生成的PHP腳本與動態ID。例如，

<a href="http://www.example.com/find.php?id=xy1" id="xy1" onMouseover="analyze('final', 'xy1')">xy1</a> 
<a href="http://www.example.com/find.php?id=ay2" id="ay2" onMouseover="analyze('final', 'ay2')">ay2</a> 
<a href="http://www.example.com/find.php?id=am3" id="am3" onMouseover="analyze('final', 'am3')">am3</a> 

<div id="xy1"></div> 
<div id="ay2"></div> 
<div id="am3"></div> 

我想通過在jQuery的功能analyze()來顯示基於onMouseover事件的一些文本。例如，

function analyze(db, target) { 
    jQuery.ajax({ 
    type: "GET", 
    url: "toThumb.php", 
    data: 'db=' + db + '&id=' + target, 
    success: function(output){ $("#"+target).html(output); } 
    }); 
} 

這裏，元素的id #xy1必須自動基於onMouseover事件分配。像xy1作爲變量名的值。也許在下一個onMouseover事件它將是ay2或am3。

我試着用$("#"+target).html(output);設置它失敗......如果我單獨測試$("#xy1").html(output);或$("#ay2").html(output);或$("#am3").html(output);它工作正常。

我的編碼方式錯了嗎？或者，我可以使用this而不是傳遞參數嗎？

Answer 1

感謝Rahul Patel。我在編碼方面做了三處改動。

（1）刪除了id

<a href="http://www.example.com/find.php?id=xy1" onMouseover="analyze('final', 'xy1')">xy1</a> 
<a href="http://www.example.com/find.php?id=ay2" onMouseover="analyze('final', 'ay2')">ay2</a> 
<a href="http://www.example.com/find.php?id=am3" onMouseover="analyze('final', 'am3')">am3</a> 

（2）更改id到class

<div class="xy1"></div> 
<div class="ay2"></div> 
<div class="am3"></div> 

（3）改變到$("#"+target).html(output);$("."+target).html(output);

現在問題解決了...

Answer 2

您可以使用.data()

在你的HTML你必須通過你的ID在這樣的數據target屬性。

例子： -

<a href="http://www.example.com/find.php?id=xy1" data-target="xy1" onMouseover="analyze(this)">xy1</a> 
<a href="http://www.example.com/find.php?id=ay2" data-target="ay2" onMouseover="analyze(this)">ay2</a> 
<a href="http://www.example.com/find.php?id=am3" data-target="am3" onMouseover="analyze(this)">am3</a> 

<div id="xy1"></div> 
<div id="ay2"></div> 
<div id="am3"></div> 

然後在你的jQuery，你可以得到的數據值。並根據此數據值傳遞您的數據。

function analyze(this) 
{ 
    var getTargetId = $(this).data("target"); 
    $("#"+getTargetId).html(data); 
} 

Answer 3

首先，id在DOM中應該是唯一的。取而代之，您可以使用下面的類。

請檢查下面的工作演示。

function analyze(ele){ 
 
    $("."+ele.id).html(ele.innerHTML); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="http://www.example.com/find.php?id=xy1" id="xy1" onMouseover="analyze(this)">xy1</a> 
 
<a href="http://www.example.com/find.php?id=ay2" id="ay2" onMouseover="analyze(this)">ay2</a> 
 
<a href="http://www.example.com/find.php?id=am3" id="am3" onMouseover="analyze(this)">am3</a> 
 

 
<div class="xy1"></div> 
 
<div class="ay2"></div> 
 
<div class="am3"></div>

Answer 4

問題是由於文檔中重複的ID。根據W3C：

id = ID

爲元素的唯一標識符。 文檔中不能有多個元素具有相同的id值。

此外，在不同容器中顯示項目時沒有任何意義，因爲您也可以簡單地使用PHP生成它們。

function analyze(node) { 
 
    $('#container').html(node.innerHTML /* whatever */); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container">(empty)</div> 
 

 
<a href="http://www.example.com/find.php?id=xy1" id="xy1" onmouseover="analyze(this)">xy1</a> 
 
<a href="http://www.example.com/find.php?id=ay2" id="ay2" onmouseover="analyze(this)">ay2</a> 
 
<a href="http://www.example.com/find.php?id=am3" id="am3" onmouseover="analyze(this)">am3</a>