[英]How to assign dynamic element id in jQuery when onMouseOver in a href tag?
我有3個超鏈接和由具有動態ID的PHP腳本隨機生成的DIV。 例如,
<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中的函數onMouseover
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
代替傳遞參數嗎?
您可以使用.data()
在您的html中,您必須像這樣在data-target屬性中傳遞ID。
例:-
<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);
}
首先,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>
該問題是由於文檔中的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>
感謝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);
現在問題解決了...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.